代码之家 › 专栏 › 技术社区 › Tpk43

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

options angularjs arrays html javascript

Tpk43 · 技术社区 · 7 年前

我在那里有一个编辑页面,我有一个名为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}]

2 回复 | 直到 7 年前

cÐ½Ådk 7 年前

您的绑定无法工作,因为您正在使用 ng-options 在你的 select 随着 ng-repeat 在你的 options ,只能使用其中一个。

和使用 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>

Marcus Höglund 7 年前

你试过只使用ng选项吗

<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;

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

3 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

3 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前