选中复选框ng-change不会第一次触发

时间:2015-09-19 15:53:03

标签: angularjs checkbox angularjs-ng-change

这是我的代码:



$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>
&#13;
&#13;
&#13;

现在,当我运行此ng-change时,除非第一次取消选中已选中复选框,否则会触发更改。当再次检查时(所以当它第二次被点击时)它会触发。

1 个答案:

答案 0 :(得分:4)

首先{{}}

中不需要角度表达式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)"
/>