Question

我有一个编辑页面，我有一个名为Role的下拉列表，插入时我向db发送了一个值（比如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与ng-repeat中的options一起使用ng-value，只能使用其中一个。< / p>

使用value代替<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>，这就是你的HTML绑定：

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>

SentMessage

Answer 2

您是否尝试过使用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;

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

2 个答案: