Question

是否有从其他列表中获取成员名称的选项在基于成员ID的表中？

(function(){

var app = angular.module('tableApp',[]);
app.controller('tableController', function($scope){
    $scope.users = [
        { id: 2, name: 'member2'},
        { id: 5, name: 'member5'},
        { id: 1, name: 'member1'},
        { id: 4, name: 'member4'},
        { id: 3, name: 'member3'}
    ];
    $scope.items = [	    
        { product: 'Lorem ipsum', date: '12-March-2013', rate: 12.35, member: 1, status: 'approved' },
        { product: 'dolor sit', date: '1-January-2011', rate: 60.54, member: 3, status: 'pending'},
        { product: 'adipisicing', date: '14-November-2014', rate: 0.99, member: 1, status: 'approved'},
        { product: 'do eiusmod', date: '2-November-2014', rate: 4.00, member: 2, status: 'approved'},
        { product: 'culpa qui', date: '1-November-2014', rate: 34.05, member: 1, status: 'pending'},
        { product: 'mollit anim', date: '3-November-2014', rate: 45.00, member: 4, status: 'approved'}
    ];
});

})();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
  <table class="table table-striped table-hover" ng-controller="tableController">
    <thead>
      <tr>
        <th>Date</th>
        <th>Amount</th>
        <th>Member</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items ">
        <td>{{item.product}}</td>
        <td>{{item.date}}</td>
        <td>{{users[item.member-1].name}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

使用索引号。即，ng-repeat="(ind, item) ..."。例如：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
    <table class="table table-striped table-hover" ng-controller="tableController">
        <thead>
        <tr>
            <th>Date</th>
            <th>Amount</th>
            <th>Member</th>
            <th>Name</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="(ind, item) in items | orderBy : 'rate'">
            <td>{{item.product}}</td>
            <td>{{item.date}}</td>
            <td>{{item.member}}</td>
            <td><span ng-repeat="info in users">{{info.id === item.member ? info.name : ''}}</span></td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    (function(){

        var app = angular.module('tableApp',[ ]);
        app.controller('tableController', function($scope){
            $scope.users = [
                { id: 2, name: 'member2'},
	            { id: 5, name: 'member5'},
	            { id: 1, name: 'member1'},
	            { id: 4, name: 'member4'},
	            { id: 3, name: 'memeber3'}
            ];
            $scope.items = [
                { product: 'Lorem ipsum', date: '12-March-2013', rate: 12.35, member: 1, status: 'approved' },
                { product: 'dolor sit', date: '1-January-2011', rate: 60.54, member: 3, status: 'pending'},
                { product: 'adipisicing', date: '14-November-2014', rate: 0.99, member: 1, status: 'approved'},
                { product: 'do eiusmod', date: '2-November-2014', rate: 4.00, member: 2, status: 'approved'},
                { product: 'culpa qui', date: '1-November-2014', rate: 34.05, member: 1, status: 'pending'},
                { product: 'mollit anim', date: '3-November-2014', rate: 45.00, member: 4, status: 'approved'}
            ];
        });

    })();
</script>

＆＃13;

Answer 2

向您的范围添加一个方法，该方法在给定项目时查找用户：

(function(){

var app = angular.module('tableApp',[ ]);
app.controller('tableController', function($scope){
    $scope.users = [
        { id: 2, name: 'member2'},
        { id: 5, name: 'member5'},
        { id: 1, name: 'member1'},
        { id: 4, name: 'member4'},
        { id: 3, name: 'memeber3'}
    ];
    $scope.items = [        
        { product: 'Lorem ipsum', date: '12-March-2013', rate: 12.35, member: 1, status: 'approved' },
        { product: 'dolor sit', date: '1-January-2011', rate: 60.54, member: 3, status: 'pending'},
        { product: 'adipisicing', date: '14-November-2014', rate: 0.99, member: 1, status: 'approved'},
        { product: 'do eiusmod', date: '2-November-2014', rate: 4.00, member: 2, status: 'approved'},
        { product: 'culpa qui', date: '1-November-2014', rate: 34.05, member: 1, status: 'pending'},
        { product: 'mollit anim', date: '3-November-2014', rate: 45.00, member: 4, status: 'approved'}
    ];
    $scope.findUser = function(item){
        for (var i = 0; i < $scope.users.length; i++) {
            user = $scope.users[i];
            if (user.id === item.member){
              return user;
            }
        }
    }
});

})();

使用该方法查看用户：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
  <table class="table table-striped table-hover" ng-controller="tableController">
    <thead>
      <tr>
        <th>Date</th>
        <th>Amount</th>
        <th>Member</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items ">
        <td>{{item.product}}</td>
        <td>{{item.date}}</td>
        <td>{{findUser(item).name}}</td>
      </tr>
    </tbody>
  </table>
</div>

如何使用object.id从列表中显示object.name

2 个答案: