меняющихся проверили свойство элемента в ngRepeat вложенного списке

My code - Plunker меняющихся проверили свойство элемента в ngRepeat вложенного списке

Я добавил checkbox все мои objects в nested list созданной ngRepeat. My objects разделены на folders и files.

Я хочу сделать что-то простое, когда я проверяю коробку с несколькими файлами и папками, я хочу , чтобы изменить их статус, используя select-option.

например.

e.g.

У меня серьезная проблема binding мой listobjectsstatus свойство с select-option проблема еще сложнее, когда я пытаюсь применить его на пару objects внутри, когда list вложен.

MY КОД

вар 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>

источник

2013-09-18 Canttouchit

Создание вариантов с использованием 'нг - options'. – AlwaysALearner

Я никогда не понимал, что так хорошо в 'ng-options'. В любом случае, я не вижу, как он решает мою проблему. – Canttouchit

Также необходимо привязать флажки с помощью 'ng-model' – AlwaysALearner

Bind модель флажков и вызвать метод изменения выбора'S:

<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; 
       } 
      } 
     } 
    } 
}

источник

2013-09-18 10:10:46 AlwaysALearner

Можете ли вы заставить его работать в плункер? http://plnkr.co/edit/eiQos8AdOTjP3pcBtODG?p=preview он не работает для меня – Canttouchit

Посмотрите здесь: http://plnkr.co/edit/0O7y1q3xg1YXtGAOuZx6?p=preview – AlwaysALearner

Ваш последний плукер имел небольшую ошибку Мне удалось исправить: http: //plnkr.co/edit/nP3UjGPKdDxfy85NuyUP, теперь он работает благодаря! – Canttouchit

меняющихся проверили свойство элемента в ngRepeat вложенного списке

ответ

Смежные вопросы