AngularJS: ng-модель не привязана к ng-проверена для флажков

я упомянул об этом, прежде чем задать этот вопрос.

AngularJs не связывает ng-проверено с ng-model

если ng-checked оценивается в true на html стороны,ng-model не обновляется. Я не могу!--4--> как предложено в приведенном выше вопросе, потому что я должен использовать некоторый стиль для каждого флажка.

вот планкер, который я создал, чтобы проиллюстрировать мой проблема.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

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

спасибо заранее!

74
angularjs angularjs-ng-checked angularjs-ng-model

5 ответов

ngModel и ngChecked не предназначены для совместного использования.

ngChecked ожидает выражения, поэтому, говоря ng-checked="true", вы в основном говорите, что флажок всегда будет проверяться по умолчанию.

вы должны быть в состоянии просто использовать ngModel, привязанный к логическому свойству вашей модели. Если вы хотите что-то еще, то вам либо нужно использовать ngTrueValue и ngFalseValue (который поддерживает только строки прямо сейчас), или напишите свою собственную директиву.

что именно ты пытаешься сделать? Если вы просто хотите, чтобы первый флажок был установлен по умолчанию, вы должны изменить свою модель -- item1: true,.

Edit: вам не нужно отправлять форму для отладки текущего состояния модели, кстати, вы можете просто сбросить {{testModel}} в ваш HTML (или <pre>{{testModel|json}}</pre>). Также ваш ngModel атрибуты можно упростить до ng-model="testModel.item1".

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

117

вы можете использовать ng-value-true, чтобы сказать angular, что ваша ng-модель является строкой.

Я мог бы только получить ng-true-value, если бы я добавил дополнительные кавычки, как это показано в официальных угловых документах -https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)

ng-true-value="'1'"
11

что вы могли бы сделать, это использовать ng-repeat передача значения того, что вы повторяете на ng-checked и оттуда, используя ng-class применять стили в зависимости от результата.

недавно я сделал что-то подобное, и это сработало для меня.

1

может объявить как в ng-init также получить true

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

и Вы можете выбрать первый и объект, также показанный здесь true, false, flase

1

на ng-model и ng-checked директивы не должны использоваться вместе

документы:

ngChecked

устанавливает проверяемый атрибут на элементе, если выражение внутри ngChecked - истина.

обратите внимание, что эта директива не должна использоваться вместе с ngModel, так как это может привести к неожиданному поведению.

- AngularJS NG-проверенный API директивы Ссылка

вместо этого установите желаемое начальное значение от контроллера:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };
0