How to hide a text box that was created by angularjs ng-repeat

Question

So I have three labels and textboxes that are being created by an 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>

I want to hide the label and the textbox for any field named 'Field1'. How do you accomplish this using angularjs?

Answer 1

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

Answer 2

If you want to hide the label and the textbox for any field named 'Item1', this is how you would do it. You would use ng-if="fld.Name !== 'Item1'

 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 }]; }); 

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

Answer 3

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

            ng-if="!$last"