无法更改选择选项项目的角度

Question

我有一个这样的选择选项：

<select ng-init="filterSelected = getItems.data.key" 
        ng-model="filterSelected" 
        ng-options="data.key as data.label for data in getItems.data" ></select>

我在其中解析了一个 json，它返回了一些结果，这些结果在此选择中显示为项目。这不是问题，我可以显示这些项目，但我不能更改它们。它卡在第一个上，即使我尝试更改值仍然显示第一个。顺便说一句，我的 javascript 中有一个函数：

$scope.getObjects = function(){
            for (var i = 0; i < $scope.getItems.data.length; i++) {
                if($scope.filterSelected = $scope.getItems.data[i].key){
                    return $scope.getItems.data[i].objects;
                }
            }
        };

这个函数需要，因为我必须在我的 json 中找到正确的对象来循环，就像这样：

"data": [
        {
            "label": "first",
            "objects": [
                {
                    "name": "firstObj",
                    "attributes": [
                        {
                            ----,
                            ----,
                            ----
                        },
                        {
                            ----,
                            ----,
                            ----
                        }
                    ]
                }
            ],
            "key": "1"
        },
        ---
        ---

所以我可以找到我选择的“对象”并且我可以找到该对象的正确属性。问题是卡住了。结果是正确的，但它只显示了第一个。也许模型有问题？

Answer 1

您可以在ngOptions中选择您要选择的值

在你的代码中选择key字段，然后通过key尝试获取objects，但是你可以一次获取objects

<select
    ng-model="filterSelected" 
    ng-options="data.objects as data.label for data in getItems.data" ></select>

var myApp = angular.module('myApp', []);

myApp.controller("mycontroller", ["$scope", "$http",
  function($scope, $http) {
    $scope.getItems = {
      "data": [{
        "label": "first",
        "objects": [{
          "name": "firstObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "1"
      }, {
        "label": "second",
        "objects": [{
          "name": "secondObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "2"
      }]

    };
    $scope.filterSelected = $scope.getItems.data[0].objects;
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='mycontroller'>
  <select ng-model="filterSelected" ng-options="data.objects as data.label for data in getItems.data"></select>

  {{filterSelected}}
</div>

UPDATE 用于评论，因此您需要保存完整对象，而不是仅保存对象、标签或关键属性。

<select
    ng-model="filterSelected" 
    ng-options="data.label for data in getItems.data" ></select>

var myApp = angular.module('myApp', []);

myApp.controller("mycontroller", ["$scope", "$http",
  function($scope, $http) {
    $scope.getItems = {
      "data": [{
        "label": "first",
        "objects": [{
          "name": "firstObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "1"
      }, {
        "label": "second",
        "objects": [{
          "name": "secondObj",
          "attributes": [{
            "att1": "asd",
            "att2": "asd2"
          }, {
            "att3": "asd3",
            "att4": "asd4"
          }]
        }],
        "key": "2"
      }]

    };
    $scope.filterSelected = $scope.getItems.data[0];
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='mycontroller'>
  <select ng-model="filterSelected" ng-options="data.label for data in getItems.data"></select>

  <div>objects: {{filterSelected.objects}}</div>
  <div>key: {{filterSelected.key}}</div>

</div>