Angular Clicking on Text to show div tag

367
March 18, 2017, at 07:07 AM

I was wondering how to accomplish this with Angular as it seems that ng-click is something to use, then ng-model seems like that could be used.

I want to click on Text and then have a div show its contents and it is not working

My fiddle https://jsfiddle.net/gdxwtoL7/

<div class="well" ng-controller="MyController">
    <a class="btn btn-primary" ng-model="selMe" ng-click="handleAnchorClick()">Enter Address</a>
</div>
<br>
<br>
<div ng-if="selMe">
      adfadf
</div>

simple module and controller

  angular.module('myapp', []);
  angular.module('myapp').controller('MyController', MyController)
  function MyController($scope) {
  }
Answer 1

The controller has to be aware of the div you want it to show. the ng-if is waiting for the value of the selme which you can alter from the controller. The ng-model binds your data to your controller in adding two-way data binding. I made a little enhancement to your code to toggle the div when the text is clicked multiple times. https://jsfiddle.net/gdxwtoL7/2/

<div class="well" ng-controller="MyController">
  <a class="btn btn-primary" ng-model="selMe" ng-click="handleAnchorClick(selMe)">Enter Address</a>
  <br>
  <br>
  <div ng-if="selMe">
    adfadf
  </div>
</div>
angular.module('myapp', []);
angular.module('myapp').controller('MyController', MyController)
function MyController($scope) {
 $scope.handleAnchorClick = function (selMe) {
   $scope.selMe = !selMe
 }
}
Answer 2

You're not doing anything inside the ng-click function, and you have the ng-if outside of the controller linked to the variable inside it.

https://jsfiddle.net/gdxwtoL7/1/

HTML

<div class="well" ng-controller="MyController">
<a class="btn btn-primary" ng-click="handleAnchorClick()">Enter Address</a>
<br>
<br>
  <div ng-if="selMe">
    adfadf
  </div>
</div>

JS

angular.module('myapp', []);
angular.module('myapp').controller('MyController', MyController)
function MyController($scope) {
 $scope.handleAnchorClick = function () {
   $scope.selMe = true
 }
}
Answer 3

The ngModel directive binds an input,select, textarea (or > custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModel is responsible for:

  • Binding the view into the model, which other directives such as input, textarea or select require.
  • Providing validation behavior (i.e. required, number, email, url).
  • Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
  • Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations.
  • Registering the control with its parent form.

The ngClick directive allows you to specify custom behavior when an element is clicked.

Note : we need ng-click to capture the event and manipulate the data stored in ng-model.

Answer 4

Here is simple code without the need of controller:

<div class="well">
<a class="btn btn-primary" href="" ng-click="show=true">Enter Address</a>
</div>
<br>
<br>
<div ng-show="show">
 adfadf
</div>
Answer 5

As @MikeHughesIII already pointed out, outside of your controller you can't reach $scope variables.

I am adding a quick snippet made after Mike's answer for completeness sake, showing a show/hide (toggle) approach, where the function sets the visibility variable to the opposite of its current status (true or false) when the function is invoked.

Hope that helps to clarify the issue.

<!DOCTYPE html> 
<html> 
 
<head> 
  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
  <link rel="stylesheet" href="style.css" /> 
  <script src="script.js"></script> 
</head> 
 
<body ng-app="myApp"> 
  <div ng-controller="myController"> 
    <h1>Hello {{hello}}!</h1> 
    <a href ng-click="toggleDivVisibility()">Enter your address</a> 
    <br> 
    <textarea ng-if="visible" name="address" id="address" cols="30" rows="5"></textarea> 
  </div> 
 
  <script> 
    angular.module('myApp', []); 
 
    angular.module('myApp') 
      .controller('myController', myController); 
 
    function myController($scope) { 
      $scope.hello = "world"; 
      $scope.visible = false; 
      $scope.toggleDivVisibility = function() { 
        $scope.hello = 'mondo'; 
        $scope.visible = !$scope.visible; 
      } 
    } 
  </script> 
 
</body> 
</html>

READ ALSO
Autobahn JS Subscription management

Autobahn JS Subscription management

I am setting up a blog between our clients and us so they can have a space to talk about the different commercial transactions (each commercial transaction has a reference number and has it's own information)

558
I cannot change the value of a dynamically populated select using JQuery

I cannot change the value of a dynamically populated select using JQuery

I dynamically populate a select with the data coming from a DB

223
How would you show a live graph of button presses vs. time?

How would you show a live graph of button presses vs. time?

I've got an idea for a simple websiteIt would't be much more than a button

233
JQuery UI draggable along with pointer

JQuery UI draggable along with pointer

Am building a page which has draggable panelIn which it has a standard grid

337