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

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

AngularJs не связывает ng-проверено с ng-моделью

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

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

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

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

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

Источник

7 ответов

Решение

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

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

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

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

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

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

Источник

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

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

ng-true-value="'1'"
Источник

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

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

Источник

Может объявить как в NG-init также становится правдой

<!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

Источник

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

Из документов:

ngChecked

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

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

- AngularJS NG-проверенная директива API Reference

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

<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 };
Источник

Тебе не нужно ng-checked когда вы используете ng-model. Если вы выполняете CRUD в своей HTML-форме, просто создайте модель для CREATE режим, соответствующий вашему EDIT режим во время привязки данных:

Режим CREATE: модель только со значениями по умолчанию

$scope.dataModel = {
   isItemSelected: true,
   isApproved: true,
   somethingElse: "Your default value"
}

EDIT Mode: модель из базы данных

$scope.dataModel = getFromDatabaseWithSameStructure()

Тогда ли EDIT или же CREATE режим, вы можете постоянно использовать свой ng-model для синхронизации с вашей базой данных.

Источник

У меня была эта проблема, когда я работал с миграцией angular js с 1.2 на 1.3. Флажок типа ввода не срабатывал, если он был инициирован с контроллера, а также не срабатывало событие ng change. Я пробовал со всеми типами, так как модель ng вместе с проверкой ng не будет работать. Затем закончилось простой вещью, которая сработала для меня, например, удаление события ng change, заменив его на ng click.

Источник
Другие вопросы по тегам