javascript - 使用ng-if时，ng-change无法正常工作 - Thinbug

使用ng-if时，ng-change无法正常工作

时间：2017-12-08 09:20:35

标签： javascript html angularjs

1。 java脚本，名为

this.changeRole=function(user){
    alert(user)
    if(user=='Admin' || user=='Subject Manager'){
     $scope.role=false;
    }
    else{
        $scope.role=true;
    }
  }

2。该函数的html称为

 <div class="form-group">
    <label class="col-sm-2 control-label">Role
        <span class="text-danger">*</span>
    </label>
    <div class="col-sm-9">
        <select class="form-control" ng-model="uc.newuser.role"
                ng-change="uc.changeRole(uc.newuser.role)" required >
            <option  ng-repeat="role in uc.roles" ng-value="user.name" >
              {{role}}
            </option>
        </select>
    </div>
 </div>

<table class="table">
    <thead>
        <tr>
          <th>User Name</th>
          <th>E-mail ID</th>
          <th>Mobile</th>
          <th>User type</th>
          <th ng-if="role=='Admin'">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.phone}}</td>
          <td>{{user.role.toString()}}</td>
          <td ng-if="role=='Admin'">
            <button class="btn btn-circle btn-gout1"
                    ng-click="uc.editUser(user.id)"
                    data-toggle="modal"
                    data-target=".bs-register-modal-md">
              <i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-circle btn-gout"
                    ng-click="uc.deleteUser(user.id)">
              <i class="fa fa-trash"></i>
            </button>
          </td>
        </tr>


    </tbody>
</table>

ng-change后，ng-if隐藏了该列。

2 个答案:

答案 0 :(得分：0)

ng-if应该像

一样进行检查

self.reduce(val => Action(val))

答案 1 :(得分：0)

不完全确定实际需要什么。但是，这就是我的想法：

选择下拉列表决定角色，并根据操作应在下一组用户中显示的角色。

您可以直接使用ng-model来执行相同操作。

var app = angular.module('myApp',[]);

app.controller('Ctrl',function($scope){
    $scope.selectedRole = 'ADMIN'
    $scope.roles = ['ADMIN','Subject Manager','Student'];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="Ctrl">
 <div class="form-group">
    <label class="col-sm-2 control-label">Role
        <span class="text-danger">*</span>
    </label>
    <div class="col-sm-9">
        <select class="form-control" ng-model="selectedRole"required >
            <option  ng-repeat="role in roles" value="{{role}}">
              {{role}}
            </option>
        </select>
    </div>
 </div>
 <table class="table">
    <thead>
        <tr>
          <th>User Name</th>
          <th>E-mail ID</th>
          <th>Mobile</th>
          <th>User type</th>
          <th ng-if="selectedRole === 'ADMIN'">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.phone}}</td>
          <td>{{user.role.toString()}}</td>
          <td ng-if="selectedRole==='ADMIN'">
            <button class="btn btn-circle btn-gout1"
                    ng-click="uc.editUser(user.id)"
                    data-toggle="modal"
                    data-target=".bs-register-modal-md">
              <i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-circle btn-gout"
                    ng-click="uc.deleteUser(user.id)">
              <i class="fa fa-trash"></i>
            </button>
          </td>
        </tr>


    </tbody>
</table>
</body>