Implementing multiple ng-hide directives in Angular with a single shared variable

Question

Implementing multiple ng-hide directives in Angular with a single shared variable

I've hit a roadblock with something that should be simple. I was planning on creating a factory to tackle this issue, but then I realized there might be a more elegant solution.

In my directive templateUrl, I have an ng-repeat:

<div ng-repeat="item in items">
   <p ng-click="toggle()" ng-hide="display">{{item.$value}}</p>
   <input ng-model="item.$value" ng-show="display">
   <button ng-show="display" ng-click="changeText(item)">finish</button>
</div>

This is what my toggle function looks like:

$scope.toggle = function (){
      $scope.display = !$scope.display;
    };

So, when I click on one <p> element, all input fields are displayed because they use the same variable. I'm struggling to find a proper angular solution that would only toggle the field within the item itself. Is there a solution out there for this dilemma?

javascript angularjs ng-hide

Answer 1

Answer №1

To improve functionality, consider utilizing item.display instead of simply display. Ensure to pass item in the toggle() function. Here's an example implementation:

<div ng-repeat="item in items">
    <p ng-click="toggle(item)" ng-hide="item.display">{{item.$value}}</p>
    <input ng-model="item.$value" ng-show="item.display">
    <button ng-show="item.display" ng-click="changeText(item)">finish</button>
</div>

JavaScript logic:

$scope.toggle = function (item) {
    item.display = !item.display;
};

Answer 2

To improve functionality, consider utilizing item.display instead of simply display. Ensure to pass item in the toggle() function. Here's an example implementation:

<div ng-repeat="item in items">
    <p ng-click="toggle(item)" ng-hide="item.display">{{item.$value}}</p>
    <input ng-model="item.$value" ng-show="item.display">
    <button ng-show="item.display" ng-click="changeText(item)">finish</button>
</div>

JavaScript logic:

$scope.toggle = function (item) {
    item.display = !item.display;
};

Answer 3

Answer №2

Give this a shot:

<div ng-repeat="element in elements">
     <p ng-click="toggle(element)" ng-hide="element.show">{{element.$value}}</p>
     <input ng-model="element.$value" ng-show="element.show">
     <button ng-show="element.show" ng-click="updateText(element)">complete</button>
</div>

$scope.toggle = function (element){
  element.show = element.show || false;
  element.show = !element.show;
};

By storing the "show" property within each element, you can individually toggle it for every item. If an element's "show" property is undefined, it will default to "false".

This is just one way of handling it, there could be more optimal solutions out there.

Answer 4

Give this a shot:

<div ng-repeat="element in elements">
     <p ng-click="toggle(element)" ng-hide="element.show">{{element.$value}}</p>
     <input ng-model="element.$value" ng-show="element.show">
     <button ng-show="element.show" ng-click="updateText(element)">complete</button>
</div>

$scope.toggle = function (element){
  element.show = element.show || false;
  element.show = !element.show;
};

By storing the "show" property within each element, you can individually toggle it for every item. If an element's "show" property is undefined, it will default to "false".

This is just one way of handling it, there could be more optimal solutions out there.

Implementing multiple ng-hide directives in Angular with a single shared variable

Answer №1

Answer №2

Similar questions

`vuetify sidebar with a nested menu``

"Utilizing AngularJS: Incorporating multiple ng-views within a single template

Guide on leveraging a private GitHub repository as a yarn dependency without installing internal dependencies

Utilize the controller's scope within a different controller

Guide to Positioning Pre-Loader in the Center on Mobile Devices

Enhancing Navigation in React Native by Passing Multiple Values to the Next Screen

Problem with Ionic Material's item class

Execute two operations using jQuery and PHP

Can you please direct me to the location of the "Vue starting point"?

Use the date-fns max function to identify the latest date in an array of date strings

Tips for properly showcasing images on a webpage after ensuring all other content has loaded

Exploring the Power of Arrays, For-Loops, and Functions in JavaScript

Retrieve the class using a text string and then obtain the subsequent string

The CSS transition effect is smooth when the accordion opens, but it does not have the same effect when

Creating a Login Form with Node.js and MongoDB

Does Somebody Possess a Fine Floating Tag?

Tips for enabling mouse wheel zoom on a three.js scene

Transferring data seamlessly between AJAX and PHP

Using VueJs to invoke a plugin from a .js file

Guide to creating a Chrome extension that can detect updates in MongoDB documents