Question

我为checkbox创建的objects中的所有nested list添加了ngRepeat。我的objects分为folders和files。

当我查看我想要的几个文件和文件夹的框时，我想做一些简单的事情使用select-option更改其状态。

e.g。

e.g.

我的binding list objects财产status存在严重问题select-option 当objects嵌套时，当我尝试在list内部应用它时，问题就更难了。

我的代码

var webApp = angular.module（'webApp'，[]）;

//controllers

webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes.getVotesByRatingID(3);


    $scope.expand = function(vote) {
       console.log("show")

       $scope.vote = vote;
       $scope.ip = vote.ip;
       $scope.date = vote.created;

    }


});


//services


webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Pending',
            show: false,
            folder: [
                {
                    id: '142',
                    created: 1381583344653,
                    updated: '222212',
                    ratingID: '3',
                    rate: 5,
                    ip: '198.168.0.0',
                    status: 'Approved'
                },
                {
                    id: '1532',
                    created: 1381583344653,
                    updated: '222212',
                    ratingID: '3',
                    rate: 5,
                    ip: '198.168.0.0',
                    status: 'Pending'
                }
            ]
        },
        {
            ratingID: '2',
            file: {
                id: '111',
                created: 1381583344653,
                updated: '222212',
                ratingID: '4',
                rate: 5,
                ip: '198.168.0.1',
                status: 'Spam'
            }
        },
        {
            ratingID: '3',
            file: {
                id: '2',
                created: 1382387322693,
                updated: '222212',
                ratingID: '3',
                rate: 1,
                ip: '198.168.0.2',
                status: 'Approved'
            }
        },
        {
            ratingID: '3',
            file: {
                id: '22',
                created: 1382387322693,
                updated: '222212',
                ratingID: '3',
                rate: 1,
                ip: '198.168.0.3',
                status: 'Spam'
            }
        },
        {
            ratingID: '3',
            file: {
                id: '222',
                created: 1382387327693,
                updated: '222212',
                ratingID: '3',
                rate: 1,
                ip: '198.168.0.4',
                status: 'Approved'
            }
        }
    ];

    votes.getVotesByRatingID = function(ratingID) {
        var i, list;
        list = [];

        for (i = 0; i < votes.length; i += 1) {
            if (votes[i].ratingID == ratingID ) {
                list.push(votes[i]);
            }//end if
        }//end outer loop

        return list;
    };

    return votes;


}]);

HTML

<body ng-controller='VotesCtrl'>
    <div>
    <ul>
        <li class="check">

        </li>
        <li class="created">
            <a>CREATED</a>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
        <li class="status">
            <b>STATUS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes">
        <li class="check" ng-show="!vote.file">
          <input type="checkbox"></input>
        </li>
        <li  class="created">
            <a href="#">{{vote.created|date}}</a>
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>
        <li class="status">
            {{vote.status}}
        </li>

        <li class="check" ng-show="vote.file">
          <input type="checkbox"></input>
        </li>
        <li class="created" ng-click="expand(vote.file)">
            <a href="#">{{vote.file.created|date}}</a>
        </li>
        <li class="ip">
            {{vote.file.ip}}
        </li>
        <li class="status">
            {{vote.file.status}}
        </li>

        <ul class="file" ng-repeat="file in vote.folder">
          <li class="check">
            <input type="checkbox"></input>
          </li>
          <li class="created" ng-click="expand(file)">
              <a  href="#">{{file.created|date}}</a>
          </li>
          <li class="ip">
              {{file.ip}}
          </li>
          <li class="status">
              {{file.status}}
          </li>
        </ul>

    </ul>
   </div>

   <div class="details">
    <h3>Details:</h3>
      <div>DATE: {{date|date}}</div>
      <div>IP: {{ip|date}}</div>
      <div>STATUS: 
        <select ng-model="vote.status">
          <option value="Approved">Approved</option>
          <option value="Pending">Pending</option>
          <option value="Trash">Trash</option>
          <option value="Spam">Spam</option>
       </select>
       <p>{{vote.status|json}}</p>
      </div>
   <div>
</body>

Answer 1

将模型绑定到复选框并在select的更改上调用方法：

<ul ng-repeat="vote in votes">
    <li class="check" ng-show="!vote.file">
        <input type="checkbox" ng-model="vote.cb"></input>
    </li>
    ...
    <ul class="file" ng-repeat="file in vote.folder">
        <li class="check">
            <input type="checkbox" ng-model="file.cb"></input>
        </li>           
    </ul>
</ul>
... 
<select ng-change="change()" ng-model="votes.status" 
ng-options="status for status in statuses">
</select>

控制器：

$scope.statuses = ["Approved","Pending","Trash","Spam"];

$scope.change = function(){
    for(var i = 0; i < $scope.votes.length; i++){
        if($scope.votes[i].cb){
            $scope.votes[i].status =$scope.votes.status;
        }
        if($scope.votes[i].folder){
            for(var j = 0; j < $scope.votes[i].folder.length; j++){
                if($scope.votes[i].folder[j].cb){
                    $scope.votes[i].folder[j].status =$scope.votes.status;
                }
            }
        }
    }
}

更改ng中的已检查项目属性重复嵌套列表

1 个答案: