Question

我无法获得角度来显示数组对象的内容。

Controller.js

network.googleapis.com/loadbalancer/requests

template.html

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var items = [
            { id: 1, name: 'first obj', type: { open: true, name: 'Global' } },
            { id: 2, name: 'second obj', type: { open: true, name: 'Loco-l' } },
            { id: 3, name: 'third obj', type: { open: true, name: 'Global' } }           
  ];
  console.log(items)
});

这是JSFiddle：

https://jsfiddle.net/reala/n5bg060t/4/

编辑：我想显示<div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="eachItem" ng-options="item for item in myCtrl.items"> <option value="">My default value</option> </select> </div>，因此两个选择字段将显示“全局”，然后我最终会过滤结果以仅显示唯一值。

Answer 1

以下是您的解决方案：jsfiddle。使用ng-options="item.type.name for item in items"在select中显示corectly选项，并且必须使用$ scope.items insteed items。

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="eachItem" ng-options="item.type.name for item in items">
    <option value="">My default value</option>
  </select>
</div>

Answer 2

您必须在$scope中定义商品，并将ng-option更改为显示名称，如下所示：

ng-options="item as item.type.name for item in items track by item.id"

DEMO

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.items = [
                { id: 1, name: 'name of first object', type: { isImp: true, name: 'Global' } },
                { id: 2, name: 'another alias of two', type: { isImp: true, name: 'Loco-l' } },
                { id: 3, name: 'another alias of two', type: { isImp: true, name: 'Global' } }           
  ];
  console.log($scope.items)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="eachItem" ng-options="item as item.type.name for item in items track by item.id">
    <option value="">My default value</option>
  </select>
</div>

＆＃13;

Answer 3

你想要这样的东西吗？

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.items = [
            { id: 1, name: 'first obj', type: { open: true, name: 'Global' } },
            { id: 2, name: 'second obj', type: { open: true, name: 'Loco-l' } },
            { id: 3, name: 'third obj', type: { open: true, name: 'Global' } }           
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" >
<div ng-controller="myCtrl">

  <select ng-options="item as item.name for item in items track by item.id" ng-model="item.selected">
    <option value="">My default value</option>
  </select>
  </div>
</div>

Answer 4

你应该试试......

<强> HTML

<div ng-app="myApp" ng-controller="myCtrl as myCtrl">
  <select ng-model="eachItem" ng-options="item as item.type.name for item in myCtrl.items track by item.id">
    <option value="">My default value</option>
  </select>
</div>

<强> CONTROLLER

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var myCtrl= this;
        myCtrl.items = [
                    { id: 1, name: 'first obj', type: { open: true, name: 'Global' } },
                    { id: 2, name: 'second obj', type: { open: true, name: 'Loco-l' } },
                    { id: 3, name: 'third obj', type: { open: true, name: 'Global' } }           
          ];
});

简单的角度选择选项

4 个答案: