Question

我正在尝试使用ng隐藏功能隐藏单选按钮。我面临一个奇怪的问题。

当我在下面的html代码所示的div标签中同时使用ng-hide supplierAdminLogs 和 BuyerAdminLogs 时，两个单选按钮都被隐藏，而不仅仅是其中一个。

但是当我删除div标签中的一个ng-hide时，另一个ng-hide div标签可以通过隐藏单选按钮来完美地工作。预先感谢。

$scope.supplierAdminLogs = function() { // Hiding supplier/ buyer radio buttons on current user login role. 
  return true;
};
$scope.buyerAdminLogs = function() {
  return true;
};

$scope.adminRole = function() {

  var currentUser;
  if (localStorage.getItem("currentUser") !== null) {

    currentUser = JSON.parse(localStorage.getItem("currentUser"));
    console.log("Received", currentUser);
  } else {
    console.log("Not received");
  }
  if (currentUser[0].role == "Supplier-Admin") {
    $scope.newUser.company = currentUser[0].company;

    $scope.supplierAdminLogs(); //CALLING THE FUNCTION HERE

    return false;
  } else if (currentUser[0].role == "Buyer-Admin") {
    $scope.newUser.company = currentUser[0].company;

    $scope.buyerAdminLogs(); //CALLING THE FUNCTION HERE

    return false;
  }
};

<div class="form-group">
  <label class="control-label col-sm-2">Role</label>

  <div>

    <div ng-hide="buyerAdminLogs()">
      <input type="radio" name="addRole" 
      ng-model="newUser.role" 
      ng-required="true" value="Supplier-Admin"> 
      Supplier-Admin <br />
    </div>

    <div ng-hide="supplierAdminLogs()">
      <input type="radio" name="addRole" 
      ng-model="newUser.role" 
      ng-required="true" value="Buyer-Admin"> 
      Buyer-Admin <br />
    </div>
  </div>
</div>

Answer 1

您可以尝试使用复选框验证，例如：

  $scope.user = function(type){
    if(type === 'Supplier-Admin'){

       $scope.buyerAdminLogs = false;
    } else if (type === 'Buyer-Admin'){

       $scope.supplierAdminLogs = false;
    }
   console.log(type) 
  }

html：

 <div >
          <input type="checkbox" 
          ng-click="user('Supplier-Admin');supplierAdminLogs = true"
          ng-model="supplierAdminLogs"
          ng-required="true" ng-value="Supplier-Admin"> 
          Supplier-Admin <br />
        </div>

        <div >
          <input type="checkbox" 
          ng-click="user('Buyer-Admin');buyerAdminLogs = true"
          ng-model="buyerAdminLogs"
          ng-required="true" ng-value="Buyer-Admin"> 
          Buyer-Admin <br />
        </div>
      </div>
    </div>
    <div ng-if="buyerAdminLogs">buyerAdminLogs</div>
    <div ng-if="supplierAdminLogs">supplierAdminLogs</div>

在一起使用<div>标签时，Ng-hide不起作用

1 个答案: