Dropdownlist数据绑定在AngularJS中无法正常工作

时间:2015-09-07 07:21:07

标签: javascript c# asp.net angularjs asp.net-mvc

我正在尝试使用<select>数据绑定AngularJS标记。

脚本

$scope.customerrouters = [];

$http.post("/Customer/GetCustomerRouterList").success(function (data) {

    $scope.customerrouters = data;

});

$scope.selectedrouters = null;

HTML

<select class="form-control" ng-options="r as r.Name for r in customerrouters" ng-model="selectedrouters">
   <option value="">-- Select --</option>
</select>

问题是dorpdownlist呈现如下图所示:

enter image description here

渲染html

enter image description here

如何才能显示元素?

1 个答案:

答案 0 :(得分:2)

因此,您在列表中列出元素时遇到问题。这是工作链接 Working

这是我的身体标签:

<body ng-controller="MainCtrl">
  <input type="text" ng-model="text" />
   <select ng-model="selectedOption" ng-options="option.name for option in options">
   </select>
   {{ selectedOption.value }}
</body>

这是我的控制者:

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

app.controller('MainCtrl', function($scope) {
   $scope.options = [{
       name: 'a',
       value: 'something-cool-value'
    }, {
       name: 'b',
       value: 'something-else-value'
}];

在这里,我有一个json数据,在控制器MainCtrl的帮助下,我在下拉列表中列出它,通过更改下拉列表中的值,文本将被更改。