1

I have the following HTML:

    <html lang="en" ng-app="MyApp">
    <!--<other HTML elements>  -->
    <div ng-controller="nameController">
    <div ng-show="{{name}}">
        My Name
    </div>
    <span ng-click="showName()">Show Name</span>
    </div>
    <!--<other HTML elements>  -->

And my angular controller looks like this:

var app = angular.module('MyApp', []);

app.controller('nameController', function($scope){
    $scope.name = false;
    $scope.showName = function()
    {
        $scope.name = true;
    }   
});

When I run this, "My Name" is hidden initially as expected, but clicking on Show does not display it. If I do console.log($scope.name) then it displays true

I have been stuck with this for hours now...what am I doing wrong? Any help is very much appreciated..

Sterling Archer
  • 22,070
  • 18
  • 81
  • 118
Undefined Variable
  • 4,196
  • 10
  • 40
  • 69

1 Answers1

2

Remove the curly braces from {{name}}.

<div ng-show="name">

Adding this to give the answer more relevance: AngularJS Curly Braces

Community
  • 1
  • 1
Sterling Archer
  • 22,070
  • 18
  • 81
  • 118
  • Oh wow, that works!! I think {{}} is needed for expressions...If I have to do `ng-show={{val1 || val2}}` is that correct way? or should that also be without curly braces? – Undefined Variable Nov 12 '15 at 19:31
  • I'm new to angular, so I'm not sure about exceptions to this, but typically when in an angular attribute, braces are not needed. – Sterling Archer Nov 12 '15 at 19:31
  • @UndefinedVariable you just need to keep in mind that AngularJS expressions, i.e. `ng-something` do not need curly braces – AGE Nov 12 '15 at 19:34
  • @SterlingArcher anytime – AGE Nov 12 '15 at 19:35