在AngularJS中条件为false后,是否取消选中复选框?

时间:2017-07-24 10:57:22

标签: javascript angularjs

这是我们的控制器代码



	             /**
							 * @Summary: setProductInAlbum function, to create album
							 * @param: index, productObj
							 * @return: callback(response)
							 * @Description:
							 */	
							$scope.allAlbums = [];
							$scope.sellerUserTypeKeyId = [];
							
							$scope.getAlbumsBySellerUserTypeKeyId = function() {
								$scope.sellerUserTypeKeyId = Number(AUTH.userTypeKeyId);
								var PRODUCT_DB_REF = firebase.database().ref('datastore/productsAlbum');
							
							PRODUCT_DB_REF.orderByChild("sellerUserTypeKeyId").equalTo($scope.sellerUserTypeKeyId)
							.on("value", function(snapshot) {
									 var value = snapshot.val();
									 if(value != null) {
										$scope.allAlbums = objToArray(value);
									}
								});
							}
              /**
							 * @Summary: addProductKeyInAlbum function, to filter the connected user
							 * @param: index, isChecked, productObj
							 * @return: callback(response)
							 * @Description:
							 */
              
							$scope.getAlbumsBySellerUserTypeKeyId();
              $scope.selectedProductKey        = [];
							$scope.getSelectedProductObject  = [];
							
							$scope.addProductKeyInAlbum = function(index, isChecked, productObj) {
								$scope.productObj = productObj;
								if(isChecked) {
									//PUSH THE PRODUCT kEYID INO THE ARRAY AND PASS TO THE getProduct FUNCTION
									$scope.selectedProductKey.push($scope.productObj.keyId);
										var data = {
											keyId : $scope.selectedProductKey
										}
										//CALL THE getProduct FUNCTION FOR GET THE LIST OF THE SELCETD OBJECTS
										SellerDashboardService.getProduct(function(response) {
											if(response != null) {
												if (response.data.isSuccess) {
													$scope.getSelectedProductObject = response.data.UserProductList;
												}
											}
										}, data);
										//HERE WE WEILL BLANK THE ARRAY AFTER THE RESPONSE IS RECEIVED FROM THE SERVICE
								} else {
									//SPLICE THE PRODUCT kEYID FROM THE ARRAY 
									$scope.selectedProductKey.splice(index, 1);
									console.log($scope.selectedProductKey);
								}
							}
              
              




我有一个2数组,如果id将匹配复选框将被选中但是如果id不匹配复选框是取消选中但是在我的情况下两个复选框都将被选中

<div id="removeSelectedProductKey" class="checkbox albumSection w3-margin-top-10" ng-repeat="productObject in getSelectedProductObject">
  <div class="w3-margin-top-10" ng-repeat="albumList in allAlbums">
    <div>
      <input type="checkbox" ng-checked="productObject.keyId == albumList.productKey" ng-click="removeSelectedProductKey($event, $index)" />
    </div>
    <div>
      <input type="checkbox" ng-checked="productObject.keyId != albumList.productKey" />
    </div>
  </div>
  <label>
  </label>
  <br>
</div>

&#13;
&#13;
<div id="removeSelectedProductKey" class="checkbox albumSection w3-margin-top-10" ng-repeat="productObject in getSelectedProductObject">
  <div class="w3-margin-top-10" ng-repeat="albumList in allAlbums">
    <div>
      <input type="checkbox" ng-checked="productObject.keyId == albumList.productKey" ng-click="removeSelectedProductKey($event, $index)" />
    </div>
    <div>
      <input type="checkbox" ng-checked="productObject.keyId != albumList.productKey" />
    </div>
  </div>
  <label>
  </label>
  <br>
</div>
&#13;
&#13;
&#13;

如何解决此问题?

1 个答案:

答案 0 :(得分:0)

而是使用ng-ifng-disabled,您可以使用ng-checked,如下所示:

<div>
  <input type="checkbox" ng-checked="1 == 2" />
</div>
<div>
  <input type="checkbox" ng-checked="1 == 1" />
</div>

Check here.

另外一件事是你在checked=""写的任何内容都会被视为真实。有关参考,请参阅此answer

同样使用ng-checked,您不必两次写相同的复选框代码,因此将检查条件是否为真,如果条件为假则将取消选中。

<强>更新

Plunker