Проверьте все флажки функции внутри модального

0

Если пользователь нажимает "добавить данные", модальный открывается, у меня есть отдельные флажки для data1, data2, data3, data4. У меня также есть флажок. Если пользователь нажимает на это, он должен иметь возможность выбрать все выше 4, если снова щелкнуть, он должен отменить выбор всех. Кроме того, после выбора значение "Выбрать все" должно быть изменено на "Отменить выбор всех",

Код:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">

        <div class="modal-body">
            <label><input type="checkbox" ng-model="checkboxModel.value1"> Data1</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value2"> Data2</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value3"> Data3</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value4"> Data4</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value5">Select All</label><br/>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Add data</button>
</div>

Может ли кто-нибудь дать мне знать, как этого добиться. Я видел много сообщений в Интернете, но каждый из них имел ng-repeat для первых 4 флажков. Шахта не используется ng-repeat. Может кто-нибудь, пожалуйста, посоветуйте.

У меня есть следующий плункер: http://plnkr.co/edit/nSCGJzj1zG5SGO2N76L3?p=preview

  • 0
    ваш плункер отсутствует файл example.js
  • 0
    Обновлен плункер в описании. вот оно - plnkr.co/edit/nSCGJzj1zG5SGO2N76L3?p=preview
Теги:
modal-dialog
checkbox

3 ответа

1
Лучший ответ

Я заметил, что вы не привязывались к массиву элементов. Я исправил это, используя следующую разметку:

   <div ng-repeat="item in items">
      <label>
        <input type="checkbox" ng-model="item.Selected">{{item.name}}</label>
      <br/>
    </div>
    <label>
      <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()">Select All</label>
    <br/>

После этого мне пришлось изменить структуру свойства items, чтобы стать объектом для последующего связывания:

$scope.items = [{
name: 'item 1'
}, {
name: 'item 2'
}, {
name: 'item 3'
}, ];

Чтобы иметь возможность обновлять все остальные флажки, я применил следующий код:

$scope.checkAll = function() {

if ($scope.selectedAll) {
  $scope.selectedAll = true;
} else {
  $scope.selectedAll = false;
}
angular.forEach($scope.items, function(item) {
  item.Selected = $scope.selectedAll;
});

}

Пожалуйста, обратитесь к этому примеру plunker для полного рабочего решения.

ОБНОВИТЬ

Изображение 174551

Поделиться
1

Ну, сначала объяснение:

  1. Чтобы выбрать/отменить выбор всех checkboxes, вы можете просто перебрать элементы и установить для всех флажков значение true/false.

  2. Чтобы программно выбрать/снимите этот флажок, вы можете использовать Array.prototype.every(), который возвращается, если выбраны все флажки или нет, если выбраны все элементы, которые будут выбраны/будут сохранены, в противном случае это будет/не отменяется.

  3. Чтобы получить все выбранные элементы при закрытии модального метода, вы можете использовать метод Array.prototype.filter() чтобы возвращать только выбранные флажки.

Вот фрагмент рабочего:

(function() {
  "use strict";
  angular
    .module('ui.bootstrap.demo', [
      'ngAnimate',
      'ui.bootstrap'
    ])
    .controller('ModalDemoCtrl', ModalDemoCtrl)
    .controller('ModalInstanceCtrl', ModalInstanceCtrl);

  function ModalDemoCtrl($scope, $uibModal, $log) {
    $scope.animationsEnabled = true;

    $scope.open = function(size) {
      var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
          items: function() {
            return $scope.items;
          }
        }
      });

      modalInstance.result.then(function(selectedItems) {
        $scope.selected = selectedItems;
      }, function() {
        $log.info('Modal dismissed at: ', new Date());
      });
    }

    $scope.toggleAnimation = function() {
      $scope.animationsEnabled = !$scope.animationsEnabled;
    }
  }

  // Please note that $uibModalInstance represents a modal window (instance) dependency.
  // It is not the same as the $uibModal service used above.

  function ModalInstanceCtrl($scope, $uibModalInstance, items) {
    $scope.items = [];

    function loadData() {
      var arr = [];
      for (var i = 1; i <= 5; i++) {
        arr.push({
          "name": "Item " + i
        });
      }
      return arr;
    }

    $scope.items = loadData();

    $scope.check = function() {
      $scope.selectedAll = $scope.items.every(function(value) {
        return value.Selected;
      });
    }

    $scope.selectAll = function() {
      $scope.items.forEach(function(item) {
        item.Selected = $scope.selectedAll;
      });
    }

    function getChecked() {
      return $scope.items.filter(function(value) {
        return value.Selected;
      });
    }

    $scope.ok = function() {
      $uibModalInstance.close(getChecked());
    }

    $scope.cancel = function() {
      $uibModalInstance.dismiss('cancel');
    }
  }
})();
.main_div {
  border: 1px solid red;
  width: 30%;
  margin: 50px;
  padding: 2px;
}
<!DOCTYPE HTML>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-body">
      <div class="checkbox" ng-repeat="item in items">
        <label>
          <input type="checkbox" ng-model="item.Selected" ng-change="check()"> {{item.name}}
        </label>
        <br/>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"> Select All
        </label>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
  </script>

  <button type="button" class="btn btn-default" ng-click="open()">Add data!</button>
</body>

</html>

Если вы хотите увидеть его в plunker, нажмите здесь.

Я надеюсь, что это помогает!!

Поделиться
1

Используйте здесь пример: https://docs.angularjs.org/api/ng/directive/ngChecked# ! в основном, трюк заключается в том, чтобы добавить ко всем "подчиненным" флажкам

ng-checked="checkboxModel.value5"
Поделиться
  • 0
    я думал об использовании нг-проверено. но я не смогу дать ng-модель отдельным первым четырем флажкам. документ гласит, что ng-checked и ng-model нельзя использовать вместе, поскольку это приводит к разному поведению и ошибкам
  • 0
    Вы также можете привязать флажок «выбрать все» к некоторой функции, добавив ng-change = «change ()» и в этой функции установить «true» для всех других моделей. (Если вы не хотите знать в JS о списке флажков, вы также можете попробовать ng-change = "checkboxModel.value4 = checkboxModel.value3 = checkboxModel.value2 = checkboxModel.value1 = true")
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню