限制选择选项与另一个选择与angularjs

Question

我的数据库对象是这样的：

[
    {
        "id": 8,
        "concessionaria": {
            "id": 1,
            "nome": "asda"
        },
        "plano": {
            "id": 1,
            "sigla": "B3",
            "nome": "tetes"
        },
        "descricao": "45987",
        "enable": true
    },
    {
        "id": 7,
        "concessionaria": {
            "id": 2,
            "nome": "teste2"
        },
        "plano": {
            "id": 3,
            "sigla": "b4",
            "nome": "Teste 2"
        },
        "descricao": "qweqwe",
        "enable": true
    },
    {
        "id": 6,
        "concessionaria": {
            "id": 2,
            "nome": "teste2",
            "estado": "ES"
        },
        "plano": {
            "id": 2,
            "sigla": "B3",
            "nome": "Consumidores"
        },
        "descricao": "werwerw",
        "enable": true
    }
]

我需要显示两个选择，选择“concessionaria”，然后选择“planos”。

我怎么能这样做，因为“特许经营”会随着“平面”的变化多次出现？

Answer 1

您可以使用 limitTo 过滤器。

例如：ng-repeat="item in items | limitTo 2"

了解更多信息：https://www.w3schools.com/angular/ng_filter_limitto.asp

Answer 2

您将需要两个选择，使用不同的concessionaria值填充第一个选择，并且一旦用户从第一个选择中选择一个值，您将具有concessionaria的id，然后根据该值，您可以填充第二个选择框不同的平面。因此，如果用户选择ID为2的特许权，您的第二个选择框将填充两个平面（一个平面ID为2，另一个平面标识为3）

Answer 3

您必须创建新模型。

此示例向您展示如何转换或创建新模型以将concessionaria和plano设为array以使其成为select option

＆＃13;

＆＃13;

var app = angular.module("app", []);

app.controller("ctrl", [
  "$scope",
  function($scope) {

    var json = [{
        "id": 8,
        "concessionaria": {
          "id": 1,
          "nome": "asda"
        },
        "plano": {
          "id": 1,
          "sigla": "B3",
          "nome": "tetes"
        },
        "descricao": "45987",
        "enable": true
      },
      {
        "id": 7,
        "concessionaria": {
          "id": 2,
          "nome": "teste2"
        },
        "plano": {
          "id": 3,
          "sigla": "b4",
          "nome": "Teste 2"
        },
        "descricao": "qweqwe",
        "enable": true
      },
      {
        "id": 6,
        "concessionaria": {
          "id": 2,
          "nome": "teste2",
          "estado": "ES"
        },
        "plano": {
          "id": 2,
          "sigla": "B3",
          "nome": "Consumidores"
        },
        "descricao": "werwerw",
        "enable": true
      }
    ];

    $scope.model = {
      concessionaria: [],
      plano: []
    };

    angular.forEach(json, function(item) {
      var concessionaria = item.concessionaria;
      var plano = item.plano;
      $scope.model.concessionaria.push(concessionaria);
      $scope.model.plano.push(plano);
    });

  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <label>concessionaria</label>
  <select ng-model="form.concessionaria" ng-options="item as item.nome for item in model.concessionaria"></select> {{form.concessionaria}}
  <hr />

  <label>plano</label>
  <select ng-model="form.plano" ng-options="item as item.nome for item in model.plano"></select> {{form.plano}}
</div>

＆＃13;

＆＃13;

＆＃13;