AngularJS ng选择的ng-repeat多维

时间:2013-07-30 22:08:39

标签: angularjs

我尝试用每行选择一个表。表和select字段中的数据来自数组......

<div ng-app="app" ng-controller="MainCtrl">
<table>
    <thead>
        <tr>
            <th>Headline #1</th>
            <th>Headline #2</th>
            <th>Headline #3</th>
            <th>Headline #4</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>
                <select name="" id="">
                    <option value="" ng-repeat="role in roles">{{role.name}}</option>
                </select>
            </td>
            <td>anything...</td>
        </tr>
    </tbody>    
</table>

angular.module('app', [])
.controller('MainCtrl', function ($scope) {

        $scope.users = [
            {
                id : 1,
                name : 'Andrew',
                role : "admin"
            },
            {
                id : 2,
                name : 'Tanya',
                role : "admin"
            },
            {
                id : 3,
                name : 'Roland',
                role : "author"
            },
        ];

        $scope.roles = [
            {
                name : "author"
            },
            {
                name : "admin"
            }

        ];



});

在此处查看我的示例: jsFiddle

我需要的是简单的,每个用户都有一个角色,我希望每一行都选择正确的角色......

抱歉我的英语非常糟糕......

thx nathan

1 个答案:

答案 0 :(得分:0)

为角色数据列表添加id字段,如此

$scope.roles = [{
    id: "author",
    name: "author"
}, {
    id: "admin",
    name: "admin"
}];

并将select元素更改为

<select ng-model="user.role" ng-options="role.id as role.name for role in roles"></select>

Demo on jsFiddle