Question

默认情况下，当模态加载并满足特定条件时，我会使用ng-checked来检查复选框。但是，当我对该项目if ( item.checked)时，它将返回false。

我正在使用这样的指令。

app.directive( 'toggleButtons', [ function () {
    return {
        link: function ( scope, element ) {
            var toggleButtons = element.find( '.input-add-checkbox' )

            function checkState() {
                Array.prototype.forEach.call( toggleButtons, function( each ) {
                    if ( each.checked )
                        each.parentNode.style.backgroundColor = "#00E0AA"
                    else if ( !each.checked )
                        each.parentNode.style.backgroundColor = "transparent"
                })
            }

            Array.prototype.forEach.call( toggleButtons, function (each) {
                each.addEventListener( 'click', function () {
                    checkState()
                })
            })

            checkState()
        }
    }
}])

我的HTML就像这样

<label for="listen" type="button" class="type-toggle btn btn-green">
    <input type="radio" id="listen" name="type" value="listen" ng-checked="{{ currentState == 'app.listen' }}" ng-model="contentParams.type" class="input-add-checkbox" />
    <span class="glyphicon glyphicon-headphones"></span>
</label>

为了澄清，项目已正确检查，但JS中的样式不适用于加载指令所在的模板。另一个原因可能是它在AngularUI模式中。我也试过按钮暂停，但没有快乐。

以下是我完全使用该指令的方法。

Answer 1

仅使用ng-model和value代替：

<input type="radio" id="listen" name="type" 
  value="app.init" 
  ng-model="contentParams.type" class="input-add-checkbox" />

当ng-model与您的复选框值匹配时，将会选择此方式。而不是if(each.checked)，您应该检查值if(scope.contentParams && each.value === scope.contentParams.type)

解决问题的其他方法是使用ng-attr代替，但只会在第一次使用，而在checkState fn中，您仍需要检查value和scope.contentParams.type

 ng-attr-checked="{{contentParams.type ==='app.listen'}}

Here是一个有效的例子

Answer 2

不要同时使用ng-checked和ng-model。使用ng-checked + ng-click或ng-model + ng-change。

类似的问题：AngularJS: ng-model not binding to ng-checked for checkboxes

使用ng-checked选中复选框时，DOM不显示element.input.checked

2 个答案: