将数组值绑定到 AngularJs 中的下拉列表

Question

我有一个编辑页面，我有一个名为 Role 的下拉列表，在插入时我向数据库发送了一个值（例如 1 而不是 "Role Name"），而在检索到编辑页面时我无法初始化下拉列表中的选定文本

下面是我的html代码

<label class="adjust1-label-right">Role</label>
<select id="role" class="adjust-select-combo" ng-options="r.role_name for r in Role_Name track by r.roleid" ng-model="role">
      <option ng-repeat="rol.roleid for rol in Role_Name" value="{{rol.roleid}}">{{rol.role_name}}</option>
</select>

我试过了，但没有成功

$scope.role = $scope.Role_Name[0];

我的数据看起来像

[{"Role_Id":1,"User_Id":10001}]

Answer 1

你试过只使用 ng-options

<select id="role" 
        class="adjust-select-combo" 
        ng-options="r.Role_Id as r.User_Id for r in Role_Name" 
        ng-model="role"></select>

设置所选角色

$scope.role = $scope.Role_Name[0].Role_Id;

Answer 2

您的绑定将不起作用，因为您在 select 中使用 ng-options 并在 options 中使用 ng-repeat，只能使用其中之一.

并使用 ng-value 而不是 value，这就是您的 HTML 绑定的方式：

<select id="role" class="adjust-select-combo" ng-model="role">
   <option ng-selected="rol == role" 
        ng-repeat="rol in Role_Name" 
        ng-value="rol.Role_Id">{{rol.User_Id}}
   </option>
</select>

演示：

这是一个有效的代码段：

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

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {

  $scope.Role_Name = [{
    "Role_Id": 1,
    "User_Id": 10001
  }, {
    "Role_Id": 2,
    "User_Id": 10002
  }, {
    "Role_Id": 3,
    "User_Id": 10003
  }];
  $scope.role = $scope.Role_Name[1];

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>


<html ng-app="app">

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>

<body>

  <div ng-controller="MainCtrl">
    <select id="role" class="adjust-select-combo" ng-model="role">
   <option ng-selected="rol == role" 
        ng-repeat="rol in Role_Name" 
        ng-value="rol.Role_Id">{{rol.User_Id}}
   </option>
</select>
  </div>

</body>

</html>

将数组值绑定到 AngularJs 中的下拉列表

Bind array values to dropdown in AngularJs

html

javascript

arrays

options

angularjs