如何有条件地制作表格字段

Question

我有一个在特定条件下可见的下拉列表。 如果可见，我该如何使它成为必需品？

 <div class="col-md-6" ng-show="vm.UserList.length > 0">

    <label for="Users">{{vm.Resources.Model}}</label>
    <select class="form-control" id="users" ng-change="vm.OnSomething()" ng-model="vm.UserId">
        ....
    </select>

</div>   

在我需要的其他下拉列表中，我有“必需”属性：

 <select class="form-control"  required="" ... >

如果ng-show为true，我如何在我的下拉列表中设置所需属性？

Answer 1

您可以将ng-show="vm.UserList.length > 0替换为ng-if="vm.UserList.length > 0

在这种情况下，仅当条件为真时才会出现dom元素。将添加required属性。

如果ng-if条件失败，那么dom元素将无法在dom中出现

Answer 2

您可以使用ngRequired指令。

  

ngRequired将所需的验证程序添加到ngModel。这是最多的   常用于输入和选择控件，但也可以应用于   自定义控件。

使用：ng-required="vm.UserList.length > 0"。

在下图中，您可以看到它如何在required控件中添加select属性。

见行动：

(function() {
  var app = angular.module("app", []);
  app.controller("Controller", [function() {
    var vm = this;
    vm.UserList = [{
      "UserId": 1,
      "UserName": "User 1"
    }, {
      "UserId": 2,
      "UserName": "User 2"
    }, {
      "UserId": 3,
      "UserName": "User 3"
    }];
    vm.Resources = {};
    vm.Resources.Model = "Field";
    vm.remove = function(i) {
      vm.UserList.splice(i, 1);
    };
  }]);
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Controller as vm">
    <div class="col-md-6" ng-show="vm.UserList.length > 0">
      <label for="Users">{{vm.Resources.Model}}</label>
      <select class="form-control" id="users" ng-change="vm.OnSomething()" ng-model="vm.UserId" ng-required="vm.UserList.length > 0">
        ....
    </select>
      <br />
      <ul>
        <li ng-repeat="user in vm.UserList">
          <span ng-bind="user.UserName"></span> <button type="button" ng-click="vm.remove($index)">X</button>
        </li>
      </ul>
    </div>
  </div>
</div>