Having difficulty displaying a div using ng show

As a newcomer to AngularJS, I am encountering an issue with displaying a div through AngularJS. Although values are changing in the subheaddiv(index) function, they are not being reflected in the HTML.

Snippet of HTML code:-

 <div ng-repeat="details in feeHeadDetails">
  <h4 class="panel-title">
        {{details.name}}
             <div ng-show="{{details.add}}">
                  <div ng-click="**subheaddiv($index)**" class="pull-right">
                   <div class="col-xs-12">
                       <button class="btn btn-primary"><i class="fa fa-plus"></i>Add Sub Head</button>
                    </div>
                 </div>
               <div ng-show="{{details.deletable}}" class="pull-right">
                 <div class="col-xs-12">
                     <button headid="{{details.id}}" ng-click="deleteHead($event, $index)" class="btn btn-danger">Delete</button>
                       </div>
                 </div>
                </div>
           </h4>

Angular Script:

 $scope.subheaddiv = function (index) {
   $scope.feeHeadDetails[index].add = false;
   $scope.feeHeadDetails[index].save = true;
   console.log($scope.feeHeadDetails[index]);
 };

Answer №1

Consider removing the curly braces:

ng-show="details.add"
ng-show="details.deletable"

Answer №2

Referenced from Official AngularJS Documentation

The ngShow directive toggles the visibility of the specified HTML element depending on the provided expression in the ngShow attribute.

When using ng-show / ng-hide / ng-if, you have the option to directly use the model expression instead of wrapping it in {{ }}

<div ng-show="details.add">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

Having issues retrieving accurate data from a service in an AngularJS controller

I am currently facing some challenges with a service while trying to develop a mobile app using Ionic/Angular/Cordova. The code snippet in question is as follows: SERVICE: 'use strict'; angular.module('MyDemoApp.services').ser ...

Angular Transclude - ng-repeat fails to iterate over elements

Recently, I've been experimenting with Angular directives and encountered a peculiar issue... Check out the code snippet below: <!DOCTYPE html> <html> <head> <title>Directive test</title> <script type="text/ja ...

Enhance Bootstrap typeahead to accommodate multiple values

I have a basic typeahead setup for searching city names. However, upon selecting a city, I also need to retrieve its latitude and longitude in order to send that data to the backend. $('.typeahead').typeahead({ minLength : 3, source : ...

Error: foobar is not defined within this scope (anonymous function)

I'm facing an issue with a JavaScript file hosted on a domain called foobar.com. at http://foobar.com/static/js/main.js: $(document).ready(function() { function foobar(bar){ $.ajax({ url: "/site/foo/", ...

What is the proper method for appending a string to the id of a React JSX div element?

Is it possible to dynamically change the id of a div in JSX using the following code snippet? { ['A','B','C','D'].map((element, cell) => ( <div id="alphabet_{element}"> Some </div> )) ...

The Node.js azure-storage TableService does not offer any functionalities or operations

Having trouble connecting to my Azure storage account due to issues with the azure-storage module. Specifically, after creating a TableService object, I am only able to access the filter method on it. When attempting to use methods like queryTables and cre ...

Divide and conquer - meteorjs

I am currently utilizing the most recent version of Meteor. Meteor is designed to keep everything within the same directory structure, like this: MeteorProject -- .meteor -- client -- imports -- server -- test -- node_modules -- packa ...

Send in a form using AngularJS

I am completely new to AngularJs and am struggling with submitting a form. I used yeoman to create the angular application. Below is the code snippet from the main.html file <div class="jumbotron"> <h3>Test</h3> <br><br> ...

The touch events are not detected on Pixi.js when buttons are placed on a stage that has been both scaled and

Currently, I am developing a game using pixi js. In order to ensure that the game appears consistent on all screens, I have implemented the following scaling logic: this.scale = Math.max(this.viewWidth, this.viewHeight) / (2048 * this.ratio); Additionall ...

Accessing form data within Mongoose schema hooks via JavaScript

I have a form where I've split the content into two separate MongoDB schemas. I want to access variables that are within node.js/express.js directly in mongoose schema hooks, whether through pre or post hooks of the schema. Here are my files: expres ...

Connecting Lavarel Pusher Socket in NUXT with SSR Mode

Looking to establish a connection between the Laravel Pusher Socket and NUTX.js (SSR Mode) Application. The code snippet above adds the socketio.js plugin file, but it seems to be causing some issues. Can anyone point out what might be going wrong? And ...

Explore various queries and paths within MongoDB Atlas Search

I am currently working on developing an API that can return search results based on multiple parameters. So far, I have been able to successfully query one parameter. For example, here is a sample URL: http://localhost:3000/api/search?term=javascript& ...

Discover the complete guide on incorporating a JavaScript library with additional dependencies in Angular 2

I am a beginner with angular 2 and I am attempting to integrate the Miso Dataset JavaScript library into my angular 2 project. The Miso library requires other JavaScript libraries as dependencies. Although I have included all the necessary JavaScript file ...

What is the best way to connect to the express.js/passport.js API using an Android device as the client

Trying to access an express.js API created with node.js and passport.js. Certain methods only work when the req.user is available. Attempting to log in with Facebook and Twitter from my client app results in a plain cookie being returned. The cookie look ...

Fluctuating updated site (ajax)

What method do you recommend for maintaining the data in a table on a page current? Currently, I am using a timer that connects to the server via ajax every 2 seconds to check for updates. Is there a way to trigger an event or function only when the cont ...

Encountering difficulty in creating a Nuxt website using @googlemaps/js-api-loader

While using the @googlemaps/js-api-loader in my Nuxt 3 website, I encountered an issue. Everything worked perfectly during local development. However, when I attempted to build the project with nuxt generate (whether locally or on Vercel), I received the f ...

What is the best way to programmatically select a checkbox that was created dynamically using jQuery?

I've been scouring the internet trying to find information on what I'm attempting to accomplish, but so far I haven't come across anything helpful. The issue I'm facing is with a form that has a section dynamically added using JavaScri ...

Are you experiencing issues with the .submit() function when used in conjunction with other

Currently, I am working on a survey form that incorporates JQuery to dynamically display or hide fields based on user selections. //FORM CONDITIONALS: This script is responsible for hiding all the helpfulness radios and only displaying them when "Yes" fo ...

PHP code to export data to a CSV file containing Chinese characters

I attempted the following: $name = iconv("utf-8", "GB18030", $value["name"]); Opening in a text editor and changing the encoding Importing into Excel while adjusting the encoding This process involves PHP and JavaScript: Here is my PHP code: echo & ...