Проверяйте, снимайте флажки в массиве angularjs javascript

Question

Проверяйте, снимайте флажки в массиве angularjs javascript

0

У меня есть массив с именем namesData, который я показываю в пользовательском интерфейсе. По умолчанию флажки должны быть отмечены. Если флажок снят, этот элемент должен быть удален из namesData. Если флажок установлен, он должен быть добавлен обратно в namesData.

$scope.namesData = [{"name":"abc.txt"}, {"name":"xyz.txt"}]

HTML:

<div ng-repeat="namesList in namesData">
        <input type="checkbox" ng-model="nameItem[$index].checked" ng-change="nameChange(namesList, nameItem[$index].checked, 'nameObj'+ $index, $index)" ng-checked="nameItem.checked" name="nameObj" id="{{'nameObj'+$index}}"/>&nbsp;
        <span>{{namesList.name}}</span>

контроллер:

$scope.namesData = [{"name":"abc.txt"}, {"name":"xyz.txt"}];
$scope.nameItem.checked = true;

$scope.nameChange = function(list, isChecked, id, itemNum){
    if (isChecked){
        $scope.namesData.push(list);
    }
    else
        $scope.namesData.splice($scope.newNamesList.indexOf(list), 1);
};

Проблема. Проблема с вышеприведенной логикой заключается в том, что элементы checked/unchecked становятся добавленными/удаленными до конца массива namesData, а не фактическим элементом индекса. Пожалуйста, сообщите, как это решить.

Mustang 27 авг. 2015, в 18:28

Источник

0

Код для удаления выглядит нормально. Добавить может иметь проблемы. Вы уверены, что при удалении также удаляется последний элемент вместо того, который указан в индексе?
callmekatootie 27 авг. 2015, в 16:01
0

Если я проверяю / снимаю флажок с abc.txt, логика снова нажимает / удаляет abc.txt в namesData, а не работает с abc.txt, который уже находится в массиве.
Mustang 27 авг. 2015, в 16:09

Теги:

javascript

angularjs

checkbox

1 ответ

Ещё вопросы

Код для удаления выглядит нормально. Добавить может иметь проблемы. Вы уверены, что при удалении также удаляется последний элемент вместо того, который указан в индексе?
Если я проверяю / снимаю флажок с abc.txt, логика снова нажимает / удаляет abc.txt в namesData, а не работает с abc.txt, который уже находится в массиве.

cubbuk · Accepted Answer · 2015-08-27T15-09-00.000Z

Если вам нужно отправить только проверенные элементы, как насчет использования логики, аналогичной приведенной ниже. Вы фильтруете отмеченные элементы из своего массива и работаете с ними. Если вам действительно нужно изменить исходный массив, вы должны сохранить копию исходного массива и вставить отмеченные элементы в свою позицию, проверив исходный массив.

angular.module("myApp", []).controller("myCtrl", function($scope) {

  $scope.namesData = [{
    name: "abc.txt",
    checked: true
  }, {
    name: "xyz.txt",
    checked: true
  }];
  $scope.nameItem = {
    checked: true
  };


  $scope.submit = function() {
    $scope.selectedList = $scope.namesData.filter(function(namesDataItem) {
      return namesDataItem.checked;
    });
    console.log($scope.selectedList);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">

<body ng-controller="myCtrl">
  <div ng-repeat="namesList in namesData">
    <input type="checkbox" ng-model="namesList.checked" />&nbsp;
    <span>{{namesList.name}}</span>
  </div>
  <button ng-click=submit()>Submit</button>
  <div ng-repeat="selected in selectedList">
    {{selected.name}}
    </div>
</body>

</html>

Спасибо, куббук. Это решение работает, если мы хотим использовать другой массив для хранения проверенных значений.