angularjs Флажок нг проверили не работают

У меня есть следующий код: -angularjs Флажок нг проверили не работают

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
</head> 
<body ng-app="app" ng-controller="ctrl" ng-init="init()"> 
    <div class="container" style="width:400px"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <form> 
      <div class="form-group"> 
       <label for="selectedBasket">Select basket :</label> 
       <select id="selectedBasket" class="form-control" ng-model="selectedBasket" ng-options="b.name for b in baskets"> 
       </select> 
      </div> 
      <div ng-repeat="f in fruits" class="checkbox"> 
       <label> 
       <input type="checkbox" value="" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1"> 
        {{ f }} 
       </label> 
      </div> 
     </form>  
     </div> 
    </div> 
    </div> 

    <script> 
    var app = angular.module('app', []); 
    app.controller('ctrl', function($scope) { 
    $scope.init = function() { 
     $scope.baskets = [{'name': 'mary', 'items': ['apple', 'orange']}, {'name': 'jane', 'items': ['banana']}]; 
     $scope.fruits = ['apple', 'banana', 'cherry', 'orange', 'watermelon']; 
     $scope.selectedBasket = null; 
    }; 
    }); 
    </script> 
</body> 
</html>

если я выбираю Мэри или Джейн, я могу правильно видеть правильные элементы в их корзине проверяемой. Однако, если я вручную проверю все плоды, а затем посмотрю на Мэри или Джейн, это не исключает предметов, которые не находятся в корзинах. Почему ошибка проверки ng?

Бонус вопрос, лучше всего установить selectedBasket в null и проверить значение null в директиве, предполагая, что я не хочу ничего как значение по умолчанию, есть ли лучший способ?

источник

2015-08-19 mfc

У вас нет ng-модели в вашем флажке, поэтому ваше действие с ручным управлением нигде не регистрируется.
ng-checked используется только для того, чтобы установить флажок «slave», он не может выполнять никаких действий вручную. Я предполагаю, что вы должны использовать ng-модель, инициализированную значением ng-check, вместо использования ng-checked.

Если вы хотите сохранить ваш нг проверил, что вы можете сделать, это:

<input type="checkbox" ng-click="selectedBasket.items.push(f)" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">

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

источник

2015-08-19 13:12:34 ThibaudL

Я знаю, но дело в том, почему нг проверил неудачу? если я переключусь на новую корзину, не должен ли она смотреть на предметы и определять чек в зависимости от того, находится ли элемент в корзине или нет? он работает, если элемент находится в корзине, но не тогда, когда элемент не находится в корзине. – mfc

только что проверил документы, очевидно, ng-checked не должен использоваться с ng-model https://docs.angularjs.org/api/ng/directive/ngПроверен так, что это не ответ – mfc

Да, потому что забыл слово, которое было " вместо этого "ng-checked. – ThibaudL

Если бы такая же проблема с ng-check, попробовал все, но ничего не работало. Я хотел контролировать количество проверенных элементов при нажатии на 2, поэтому я использовал событие $ Event, отправленное с помощью ng-click, и отключил его.

Вот пример кода:

<input type="checkbox" ng-click="toggleCheck($event, product._id);" 
    ng-checked="isChecked(product._id)"> 

    $scope.toggleCheck($event, productId){ 
     if ($scope.featuredProducts.indexOf(productId) === -1) { 
      if ($scope.featuredProducts.length < 2) { 
       $scope.featuredProducts.push(productId); 
      }else { 
       $event.preventDefault(); 
       $event.stopPropagation(); 
      } 
     } else { 
      $scope.featuredProducts.splice($scope.featuredProducts.indexOf(productId), 1); 
     } 
    } 

    $scope.isChecked(productId){ 
     return ($scope.featuredProducts.indexOf(productId) !== -1); 
    }

источник

2017-02-12 07:53:32 ramon22

angularjs Флажок нг проверили не работают

ответ

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