ng-checked不是第一次更新

-1

我使用ng-repeat生成複選框，並且可以選中或取消選中它們的初始狀態，具體取決於該信息是否存在於數據中。我的問題是，即使它沒有正確顯示它們的初始檢查/未檢查狀態，當我取消選中已經「預先檢查」的框時，該框實際上取消選中，但模型不會改變。然後再檢查一次，模型不會改變，但它是正確的。然後，我再次取消選中，並在模型中正確清除並從此開始正常工作。我一直在解決這個問題好幾天，我完全陷入了困境！任何人都可以看到我是否在做一些愚蠢的事情？我的感覺是，這是一個初始化問題，但我現在距離它太近。謝謝！ng-checked不是第一次更新

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

來源

2016-06-28 Andy Rox

初始值或者計算爲ng-false-value或ng-true-value，那麼當你按下複選框時，角度將值轉換爲false和true。您可以通過打印{{option.ans}}進行檢查。我遇到了類似的問題，我的解決方案是在函數中添加解析並在複選框中單擊ng來調用它。希望有更簡單的解決方案，但至少現在你知道可能是問題的原因。 –

謝謝你 - 我試着輸出option.ans模型，但它顯示正確的值，除非當第一次未選中該框時，它不會改變。我將嘗試通過函數進行解析並單擊ng。任何其他想法的人？ :-) –

嘎，我不能做我想做的事情，因爲檢查角度複選框狀態的方法是通過模型。這太令人沮喪了！ –

這是一個簡單的，但不漂亮的example。對複選框使用默認的Angular指令從來不適合我。

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部分是非常自我解釋。

可能有更好的方法來解決這個問題，但這是我想出的解決方案。不漂亮，但它的作品。

來源

2016-06-29 06:49:18

ng-checked不是第一次更新

回答

相關問題