将数组值绑定到AngularJs中的下拉列表
[英]Bind array values to dropdown in AngularJs
问题描述
我有一个编辑页面，我有一个名为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}]
2 个解决方案
解决方案1
3 已采纳 2017-11-13 20:09:56
您的绑定将无法工作，因为你正在使用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>
解决方案2
0 2017-11-13 19:59:26
您是否尝试过使用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中的下拉列表？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.