无法更改 select 选项 angular

Question

我有这样的 select 选项：

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

我在其中解析 json returns 我的一些结果显示为 select 中的项目。这不是问题，我可以显示这些项目，但我无法更改它们。它卡在第一个上，即使我尝试更改值仍然显示第一个。顺便说一下，我的 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"
        },
        ---
        ---

所以我可以找到 "object" 我 selected 并且我可以找到该对象的正确属性。问题是卡住了。结果是正确的，但只显示第一个..可能是模型有问题？

Answer 1

您可以 select 在 ngOptions

中 select 您想要的值

在你的代码中你 select key 字段，然后通过 key 尝试获取 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>

无法更改 select 选项 angular

Can't change select option item angular

javascript

json

angularjs

html-select

angular-ngmodel