0

In my Angular app, I want a certain div to appear if a variable is true, and to disappear if it is false.

However, it is not working. See my Fiddle

Can anyone help me understand why?

HTML

<div ng-controller="MyCtrl">
    <div id="newProjectButton" class="project" ng-click="newProjectActive()" ng-if="!creatingNew">
            <h1> + </h1>
            <h3> New Project </h3>
    </div>
    <div id="newProjectActive" class="project" ng-if="creatingNew">
        <form>
            <input name="name" ng-model="newProjectName" type="text"></input>
            <button ng-click="newProject()" type="submit" class='btn btn-primary'>Save</button>
        </form>
    </div>
</div>

JS

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.creatingNew = false;

    $scope.newProjectActive = function () {
        $scope.creatingNew = true;
    }

    $scope.newProject = function () {
        alert($scope.newProjectName);
    }

}
CodyBugstein
  • 21,984
  • 61
  • 207
  • 363

2 Answers2

5

your angular version is 1.0.1. directive ng-if is not in this version of angular. its introduce in angular 1.1.5 check this article and check it in angular under Directives topic change log 

AngularJS first added the ngIf directive in 1.1.5

please update the angular version

here is the Demo

your controller should be like 

myApp.controller("MyCtrl" , function($scope) {

because the global controllers are not supported by default in angular 1.3... check this one

Community
  • 1
  • 1
Kalhan.Toress
  • 21,683
  • 8
  • 68
  • 92
2

First, when I looked at your fiddle, there was older version of your example there,

Second, which actually may be a reason, is in that example you were using angular in version 1.0.1, and i believe that version didn't implement ng-if. Updating to latest version will fix your problem

user902383
  • 8,420
  • 8
  • 43
  • 63
  • @Imray my bad, i forgot version 1.3.0 was released, it works on 1.2.27, to find reason why it didn't work for you you need to find at differences between 1.2.x and 1.3.x, but that is different question. My Guess is it cant find controller as when you add `myApp.controller("MyCtrl",MyCtrl);` to end of script it works fine – user902383 Dec 07 '14 at 11:53