Ways to conceal a text box generated through ng-repeat in angularjs

Question

Ways to conceal a text box generated through ng-repeat in angularjs

Within my code, I am utilizing an ng-repeat to generate three labels and textboxes dynamically.

            <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 am looking for a way to hide both the label and textbox if a field is named 'Field1'. How can I achieve this functionality using angularjs?

javascript angularjs

Answer 1

Answer №1

// To display content based on a boolean value, you can utilize the ng-show directive
<div ng-show="showContent"></div>

Answer 2

// To display content based on a boolean value, you can utilize the ng-show directive
<div ng-show="showContent"></div>

Answer 3

Answer №2

To conceal both the label and textbox associated with a field named 'Item1', follow these steps using the code ng-if="fld.Name !== 'Item1'

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

<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="customList">
    <li ng-repeat="fld in fields">
      <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="item in fld.Data" value="{{ item.Key }}" name="{{item.Value}}">{{ item.Value }}</option>
        </select>
      </div>
      <div ng-if="fld.Name !== 'Item1'">
        <input type="text" name="{{fld.Name}}" />
      </div>

    </li>
  </ul>
</div>

Answer 4

To conceal both the label and textbox associated with a field named 'Item1', follow these steps using the code ng-if="fld.Name !== 'Item1'

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

<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="customList">
    <li ng-repeat="fld in fields">
      <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="item in fld.Data" value="{{ item.Key }}" name="{{item.Value}}">{{ item.Value }}</option>
        </select>
      </div>
      <div ng-if="fld.Name !== 'Item1'">
        <input type="text" name="{{fld.Name}}" />
      </div>

    </li>
  </ul>
</div>

Answer 5

Answer №3

Having the final item as the one I wanted to conceal made the task easier for me. I successfully achieved my goal by adding the provided line to both the label and text box.

            ng-if="!$last"

Answer 6

Having the final item as the one I wanted to conceal made the task easier for me. I successfully achieved my goal by adding the provided line to both the label and text box.

            ng-if="!$last"

Ways to conceal a text box generated through ng-repeat in angularjs

Answer №1

Answer №2

Answer №3

Similar questions

Calculate the number of parent nodes and their respective child nodes

Tips for creating a fading effect when hovering over a div element

Adding semi-colon in JavaScript with special comments by YUI Compressor

Issues with integrating VUE frontend with PHP backend and API

Transmitting FormData from Angular to a .NET MVC Controller

How can dependencies be efficiently initialized within Angular applications?

Using LocalStorage in Greasemonkey

Show or hide table columns easily without relying on jQuery

Learn how to configure and utilize an AngularJS factory using ngResource along with passing parameters in the call

AJAX Form Submission for CommentingAJAX allows for seamless form submission

Transform a string into a property of a JSON object

Angular - Is it possible to change the visibility of a component element from a different component?

Video background in JavaScript

Generating a two-dimensional array and setting its values in JavaScript

Struggling to fetch the last and first name from a document in Firestore using VueJs

What is the best way to navigate to a specific element using jQuery?

Using angular.js variables in the script tag: A step-by-step guide

Using Vue to download a file by linking to the href and incorporating a Vuetify v-btn

Event for terminating a Cordova application

Updating attributes of objects in an observable list using Knockout JS