【问题标题】:Checked checkbox ng-change not firing first time选中的复选框 ng-change 没有第一次触发
【发布时间】:2015-12-16 16:13:12
【问题描述】:

这是我的代码:

$scope.toggleBandPics = function(bandid){
    for (var picid in $scope.bands[bandid]['pics']) {
        $scope.bands[bandid]['pics'][picid]['show'] = ($scope.bands[bandid]['pics'][picid]['show'] == 'true'? 'false': 'true');
    }
}
<span ng-repeat="band in bands">
    <div class="bandsfilter">
	    <span ng-show="bButtons">
		    <input class="checkbox"
			name="{{band.urlbandname}}"
			type="checkbox"
			id="{{band.urlbandname}}"
			ng-model="band.checked"
			ng-checked="{{band.checked}}==true"
			ng-true-value="{{band.checked}}==true"
			ng-false-value="{{band.checked}}==false"
			ng-change="toggleBandPics({{band.bandid}})"
			/>
			{{band.bandname}}&nbsp;({{band.noOfPicsPerBand}})
			    <span id="counter{{band.bandid}}" class="hidden">
                    {{band.noOfPicsPerBand}}
            </span>
		<span>
	</div>
</span>
<span ng-repeat="band in bands">
    <span ng-repeat="picture in band.pics">
	    <div class='picture' ng-show="picture.show=='true'" ng-cloack>
		    <a class="shadowbox{{picture.bandid}} photo" rel="shadowbox[{{humanconcertdate}}]" title="{{picture.bandname}}, {{humanconcertdate}}, {{venuename}}" href="/concert2/{{band.concertid}}/{{band.bandid}}/{{picture.filename}}">
				<img src="/concert2/{{picture.concertid}}/{{picture.bandid}}/{{picture.filename}}" alt="{{picture.bandname}}, {{humanconcertdate}}, {{venuename}}" />
            </a>
        </div>
    </span>
</span>

现在,当我运行这个 ng-change 时,除了第一次未选中选中的复选框外,它都会被触发。当它再次被检查时(所以当它被第二次点击时)它会触发。

【问题讨论】:

    标签: angularjs checkbox angularjs-ng-change


    【解决方案1】:

    首先,你不需要在ng-中使用角度表达式({{}}

    其次,模型将默认设置为值boolean。你不需要ng-true-valueng-false-value 来设置它。如果您需要除boolean 之外的其他值,您可以使用它

    这样试试

    <input class="checkbox"
           name="{{band.urlbandname}}"
           type="checkbox"
           id="{{band.urlbandname}}"
           ng-model="band.checked"
           ng-change="toggleBandPics(band.bandid)"
    />
    

    【讨论】:

    • bandid 没有改变。你的建议有效。但是由于您遗漏了 ng-checked (ng-checked="{{band.checked}}==true"),因此未选中该复选框。如果我添加它,我又回到了我开始的地方:不是第一次开火。
    • 尝试设置默认值 true 它的模型像这样$scope.band.checked=true
    • 或者你想默认选中ng-checked='true'
    • 模型中的每个波段条目已经有一个 band.checked=true 或 band.checked=false。如果 band.checked=true,则应选中该复选框。
    • 问题似乎源于 PHP 将 'true' 作为字符串返回的事实,该字符串在 javascript 中未评估为 true。感谢您让我走上正轨!我今天学到了一些东西:)
    猜你喜欢
    • 1970-01-01
    • 2016-09-07
    • 2015-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-22
    相关资源
    最近更新 更多