Question

所以我有三个标签和文本框由ng-repeat创建。

            <ul class="modusScriptingHiddenList">
            <li ng-repeat="fld in allFields">
                <label class="control-label">{{fld.Name}}</label>

                <div ng-if="fld.IsSelect == true">
                    <select name="{{fld.Name}}">
                        <option ng-repeat="params in fld.Results" value="{{ params.Key }}" name="{{params.Value}}">{{ params.Value }}</option>
                    </select>
                </div>
                <div ng-if="fld.IsSelect == false">
                        <input type="text" name="{{fld.Name}}" />
                </div>

            </li>
            </ul>

我想隐藏名为'Field1'的任何字段的标签和文本框。你是如何使用angularjs完成这个的？

Answer 1

// You could use ng-show and test for a boolean value
<div ng-show="myValue"></div>

Answer 2

如果要隐藏名为＆＃39; Item1＆＃39;的任何字段的标签和文本框，您就可以这样做。您可以使用ng-if="fld.Name !== 'Item1'

＆＃13;

angular.module('app', []).controller('MyController', function($scope) {
  var results = [
     {Key: '1', Value: '1'}, 
     {Key: '2', Value: '2'}, 
     {Key: '2', Value: '2'}
  ];  
  
  $scope.allFields = [{
    Name: 'Item3',
    IsSelect: true,
    Results: results
  }, {
    Name: 'Item2',
    IsSelect: false,
    Results: results
  }, {
    Name: 'Item1',
    IsSelect: true,
    Results: results
  }];

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyController">
  <ul class="modusScriptingHiddenList">
    <li ng-repeat="fld in allFields">
      <label ng-if="fld.Name !=='Item1'" class="control-label">{{fld.Name}}</label>

      <div ng-if="fld.IsSelect == true">
        <select name="{{fld.Name}}">
          <option ng-repeat="params in fld.Results" value="{{ params.Key }}" name="{{params.Value}}">{{ params.Value }}</option>
        </select>
      </div>
      <div ng-if="fld.Name !== 'Item1'">
        <input type="text" name="{{fld.Name}}" />
      </div>

    </li>
  </ul>
</div>

＆＃13;

Answer 3

由于我试图隐藏的项目是最后一块，因此我可以通过将以下行应用于标签和文本框来完成我需要的工作。

            ng-if="!$last"

如何隐藏由angularjs ng-repeat

3 个答案: