Как программно установить флажок с именем динамической модели?

#angularjs

Вопрос:

Я создал несколько флажков с именем динамической модели следующим образом:

 <label ng-repeat="item in main.itemDetails">
  <input type="checkbox" checklist-value="item.price"
  ng-click="itemChanged(item)" ng-model="checkboxes[item.name]">
   {{item.name}} - <b>{{item.price}} €</b>
   <br>
</label>

В моем контроллере я хочу установить некоторые флажки, существует ли имя их модели в массиве $ scope.SelectedItems.

Я пытаюсь сделать что-то подобное, но это не работает:

 for (var i = 0, j = $scope.selectedItems.length; i<j; i  ) {
            $scope['selectedItems[i].name'].isChecked = true;
        }

например, если item.name = ‘Item1’ Я хочу, чтобы модель называлась $scope.Item1 и позже я хочу вызвать $scope.Item1.isChecked = true;

Что я здесь делаю не так?

Ответ №1:

Вы храните модель в $scope.checkboxes , поэтому вы можете установить ее значение на true , как показано в приведенном ниже коде.

 for (var i = 0, j = $scope.selectedItems.length; i<j; i  ) {
    $scope.checkboxes[$scope.selectedItems[i].name] = true;
}

1. для этого нужен «IsChecked», как ответ @Jackthomson

2. @JoaozitoPolo Я знаю, но реальная модель такова ng-model="checkboxes[item.name]" , что одну из них нужно изменить.

3. @LenilsondeCastro что я должен изменить? Что-то в моем html?

4. @LenilsondeCastro это работает без изменений в моем html. Но, честно говоря, я не совсем понимаю, как это работает… Не могли бы вы это немного объяснить? Что меня смущает, так это то, что если я console.log $scope.checkboxes, я всегда получаю пустой массив

5. @papakias Ну, «массив» флажков привязывается из вашей директивы ngModel, как только вы объявите его из представления, это отразится на вашем $scope . Кроме того, вы должны следить за $scope.checkboxes поскольку это не происходит при инициализации контроллера, вы можете попробовать записать свой флажок, например, в html <p>{{ checkboxes }}</p> и вы сможете увидеть, что там.

Ответ №2:

Похоже, что вы используете здесь строковый литерал:

for (var i = 0, j = $scope.selectedItems.length; i<j; i ) { $scope['selectedItems[i].name'].isChecked = true;
}

Просто измените это на чтение:

for (var i = 0, j = $scope.selectedItems.length; i<j; i ) { $scope[selectedItems[i].name].isChecked = true; }

Ответ №3:

 var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.main = [{
    'name':'test1',
    'price':'23',
    'isChecked':false
    },
    {
    'name':'test2',
    'price': '25',
    'isChecked':false
    },
    {
    'name':'test3',
    'price': '21',
    'isChecked':false
    }];
    
    $scope.selectedItems = [{
    'name':'test1'
    },
    {
    'name':'test2'
    }];
    angular.forEach($scope.main, function(valueMain){
     angular.forEach($scope.selectedItems,function(valueSelected){
       if(valueMain.name=== valueSelected.name){
          valueMain.isChecked = true;
       }
      })
    
    });

    $scope.toggleCheck = function(item){
       if(item.isChecked === true){
         item.isChecked === false;
       }else{
         item.isChecked === true;
       }; 
    }
}

 <script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <label ng-repeat="item in main">
  <input type="checkbox" ng-model="item.isChecked" ng-checked="item.isChecked" ng-change="toggleCheck(item)">
   {{item.name}} - <b>{{item.price}} €</b>
   <br>
</label>
</div>
  </div>

Angular Foreach — самый простой способ решить проблему такого рода.

1. Вау… это кажется действительно хорошим, я попробую это и оставлю вам отзыв!

2. Похоже, с этим кодом возникает проблема, если я выбираю test1 и test3, но не test2

3. Да, вы правы. Я исправил эту проблему. ng-model должно иметь значение checked или нет, и для проверки изменения требуется ng-change.