时间戳

首页 > 解决方案 > 使用时 Ng-hide 不起作用

标签在一起

html - 使用时 Ng-hide 不起作用
标签在一起

问题描述

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

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

但是当我在 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>

标签： htmlangularjs

解决方案

您可以尝试使用复选框验证，如下所示：

  $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>

推荐阅读