[英]Simple angular select option
我無法顯示數組對象的內容。
Controller.js
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)
});
template.html
<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>
這是JSFiddle:
https://jsfiddle.net/reala/n5bg060t/4/
編輯:我想顯示item.type.name
,所以兩個選擇字段將顯示“全局”,然后我將最終過濾結果以僅顯示唯一值。
這是您的解決方案: jsfiddle。 ng-options="item.type.name for item in items"
以在select中核心顯示選項,並且必須使用$ scope.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>
您必須在$scope
定義項,並更改ng-option
的顯示名稱,如下所示:
ng-options="item as item.type.name for item in items track by item.id"
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) });
<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>
你想要這樣的東西嗎?
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>
你應該試試...
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' } }
];
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.