代码之家 › 专栏 › 技术社区 › 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;

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前