Question

I'd like to use ng-options for my select using AngularJS but it seems not working as I'd like...

Below you can see javascript code, which contain from creating array and also view, where ng-options are using.

var vm = this;
vm.selectedUser;
vm.userDatas = [
  { id: 1, name: "Ruslan", surname: "Poltayev" }, 
  { id: 2, name: "Handor", surname: "Ten" }
];

<div id="page-content-wrapper" 
     data-ng-controller="TableShowCtrl as t">
  <select data-ng-model="t.selectedUser" 
          data-ng-options="item.name for item in t.userDatas track by item.id">
  </select>
</div>

I have this results

enter image description here

Answer 1

您需要声明元素以显示不同的选项。要使用name属性显示选项，您可以使用：

<select ng-model="selected.user">
<option ng-repeat="item in t.userDatas">{{ item.name }}</option>
</select>

<!-- display selected user -->
{{ t.selected.user | json }}

Answer 2

检查一下。

<body ng-app="Sample">
<h1>Sample Angular controller</h1>
<div ng-controller="Ctrl">
  <div id="page-content-wrapper" >
  <select ng-model="t.selectedUser" ng-options="item.name for item in usrDatas ">
  </select>
</div>
</div>
  </body>

脚本：

// Code goes here
var app = angular.module("Sample",[]);
app.controller("Ctrl", function($scope){
  var vm = this;
vm.selectedUser;
$scope.userDatas = [  { id: 1, name: "Ruslan", surname: "Poltayev" }, 
  { id: 2, name: "Galym", surname: "Kariev" }];
})

Working Demo at Plnkr

AngularJS ngOption does not display datas

2 个答案: