ng-check не обновляется в первый раз

Я генерирую флажки, используя ng-repeat, и их начальный статус может быть отмечен или не отмечен в зависимости от того, существует ли эта информация в данных или нет. Моя проблема в том, что, хотя он правильно показывает их исходное состояние "проверено / не проверено", когда я снимаю флажок, который был "предварительно проверен", флажок физически снимается, но модель не меняется. Затем я проверяю это снова, и модель не меняется, но это правильно. Затем я снова снимаю флажок, и он корректно очищается в модели и с тех пор работает правильно. Я работал над этой проблемой в течение нескольких дней, и я полностью застрял! Кто-нибудь может увидеть, что я делаю что-то глупое? Я чувствую, что это проблема инициализации, но я слишком близко к ней, чтобы видеть сейчас. Спасибо!

<!-- if this is a checkbox to be drawn -->
<div ng-if="option.option_type=='checkbox'">
  <label class="item-checkbox-right">
  {{option.caption}} 
   <!-- handle multiple options -->

  <!-- if answered_options[n]weight exists, make option.ans = weight --></label>
  <ul ng-repeat="opti in questionpart.survey_answer[0].answered_options">
    <li style="list-style: none; display: inline">

    <!-- if option is set in the received data, set it in the model -->
      <div ng-if="opti.id == option.id">
        <div ng-init="option.ans = option.weight"></div>
      </div>
    </li>
  </ul>
  <label class="item-checkbox-right">
      <!-- show the checkbox and bind to option.ans-->
      <input class="checkbox-light" 
      type="checkbox" 
      name="{{questionpart.id}}" 
      ng-false-value="0" 
      ng-true-value="{{option.weight}}"
      ng-model="option.ans"
      ng-checked="option.ans==option.weight" />
  </label>
</div>
Источник

1 ответ

Решение

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

app.js

$scope.data = [{checkboxValue: 0}, {checkboxValue: 1}, {checkboxValue: 2}];
$scope.dataCopy = angular.copy( $scope.data );

$scope.setCheckboxValue = function( checkbox, index ) {
    checkbox.checkboxValue = checkbox.checkbox ? $scope.dataCopy[index].checkboxValue : 0;
}

$scope.parseCheckboxes = function() {
    for( var i = 0, len = $scope.data.length ; i < len ; i++ ) {
        $scope.data[i].checkbox = $scope.data[i].checkboxValue > 0 ? true : false;
    }
}

$scope.parseCheckboxes();

В основном то, что я делаю в контроллере, обрабатывает логику для флажков самостоятельно. Я создаю копию массива, чтобы при переключении с false на true мы получали начальное значение.

Я делаю дополнительный ключ в каждом объекте, который отслеживает состояние флажка (true или false), чтобы он не мешал действительному значению.

Первоначальная маркировка выполняется путем анализа массива объектов и установки всех флажков в true или false в зависимости от их значений.

HTML

<body ng-controller="MainCtrl">
    <label ng-repeat="d in data track by $index">
        <input type="checkbox" ng-model="d.checkbox" ng-change="setCheckboxValue(d, $index )" />
        {{d.checkbox}}
        {{d.checkboxValue}} 
        <br>
    </label>
</body>

Часть HTML довольно понятна.

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

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