Добавить массив, установив флажок с помощью ng-repeat

Question

Добавить массив, установив флажок с помощью ng-repeat

0

У меня возникла небольшая проблема с добавлением правильных данных в мою форму отправки. Все записи для этой формы динамически выводятся из http-запроса, одно из этих полей - это категории, значения для этого поля динамически выводятся из другого HTTP-запроса, с помощью ng-repeat я выдаю значения в моей форме. Значения имеют идентификаторы и имена. Мне нужно отправить мою форму, массив идентификаторов категорий выглядит как categories: [1,4,5,7], где числа являются идентификаторами выбранных категорий. Проблема в том, что мой массив похож на categories: [1: true, 5, true ] что совершенно неправильно. Это плункер с моей проблемой. Я полагаю, что что-то не так с моей ng-моделью, но не могу найти, что именно. Так может ли кто-нибудь сказать мне, что мне не хватает?

код

     $scope.category = [
    {"id":5,"name":"Data Quality"},
    {"id":2,"name":"Documentation"},
    {"id":4,"name":"Drug Supply"},
    {"id":8,"name":"Enrollment"},
    {"id":3,"name":"Patient Safety"},
    {"id":7,"name":"Randomization"},
    {"id":9,"name":"Site Performance"},
    {"id":1,"name":"Study Conduct"},
    {"id":6,"name":"Technology Related"}
    ]

    $scope.sendData = {}

    $scope.vmodel = angular.copy($scope.sendData);

 $scope.onSubmit = function (event) {
                if (event.id == null || event.id == 0) {
                    console.log(event)
                }
            };

HTML

 <div class="form-check-inline" ng-repeat="cat in category">
      <label class="form-check-label col-xs-4 no-padding" for="categories" ng-true-value="'{{cat.name}}'" ng-false-value="''">
                        {{ cat.name }}
                  <input type="checkbox" 
                  class="form-check-input col-xs-2"
                  id="categories" 
                  ng-model="vmodel.categories[cat.id]" />
      </label>
    </div>

antonyboom 18 авг. 2016, в 21:00

Источник

0

Ваш вывод (vmodel.categories) выглядит следующим образом: {"5":true,"7":true,"8":true,"9":true} , верно? И вы ищете [5, 7, 8, 9]
c2huc2hu 18 авг. 2016, в 18:40
0

@user3080953 user3080953 это правильно
antonyboom 18 авг. 2016, в 18:44
0

вот фиксированная вилка: ссылка
Kaushal Niraula 18 авг. 2016, в 18:49
0

@KaushalNiraula большое спасибо !! Работает отлично
antonyboom 18 авг. 2016, в 18:55
0

Вы можете пометить это как завершенное?
Kaushal Niraula 18 авг. 2016, в 18:57
0

я добавил ответ в раздел ответов, просто пометьте его как ответ. Нажмите на галочку
Kaushal Niraula 18 авг. 2016, в 19:07

Показать ещё 4 комментария

Теги:

javascript

angularjs

arrays

angular-ngmodel

angularjs-ng-repeat

2 ответа

0

Скажем, ваш ввод {"5": true, "7": true, "8": true, "9": true}. Я вижу два варианта:

1) Преобразование объекта:

$scope.$watch('vmodel.categories', function(val) { 
  if (val) 
    $scope.selected = Object.keys(val)
    console.log($scope.selected)  // output is $scope.selected
}, true)

2) Измените способ прослушивания событий

<!-- html --> 
<input type='checkbox' ng-click='toggle(cat)' />


// js 
$scope.selected = [] 
$scope.toggle = function(cat) {
  if ($scope.vmodel.categories[cat]) 
    $scope.selected.push(cat) 
  else 
    $scope.selected.remove(cat) // pretend this function exists in js
}

c2huc2hu 18 авг. 2016, в 16:49

Ещё вопросы

Ваш вывод (vmodel.categories) выглядит следующим образом: {"5":true,"7":true,"8":true,"9":true} , верно? И вы ищете [5, 7, 8, 9]
@KaushalNiraula большое спасибо !! Работает отлично
Вы можете пометить это как завершенное?
я добавил ответ в раздел ответов, просто пометьте его как ответ. Нажмите на галочку

Kaushal Niraula · Accepted Answer · 2016-08-18T16-23-00.000Z

<label class="form-check-label col-xs-4 no-padding" for="categories" ng-true-value="'{{cat.name}}'" ng-false-value="''">
            {{ cat.name }}
            <input type="checkbox" class="form-check-input col-xs-2"  ng-click="add(cat.id)" id="categories" />
          </label>


$scope.sendData = {
    categories: []
  }

  $scope.add = function(id) {
    if ($scope.sendData['categories'].indexOf(id) == -1) {
      $scope.sendData.categories.push(id);
    } else {
      $scope.sendData.categories.splice($scope.sendData['categories'].indexOf(id), 1);

    }
    console.log($scope.sendData);



  }

  $scope.onSubmit = function(event) {

    console.log($scope.sendData)
  };