为什么我的 ng-if 不起作用?它没有隐藏 div [英] Why is my ng-if not working? It's not hiding the div

问题描述

在我的 Angular 应用程序中，我希望某个 div 在变量为真时出现，如果为假则消失.

然而，它不起作用.看我的小提琴

谁能帮我理解为什么?

HTML

<div id="newProjectButton" class="project" ng-click="newProjectActive()" ng-if="!creatingNew"><h1>+<h3>新项目
<div id="newProjectActive" class="project" ng-if="creatingNew"><表格><input name="name" ng-model="newProjectName" type="text"></input><button ng-click="newProject()" type="submit" class='btn btn-primary'>保存</button></表单>

JS

var myApp = angular.module('myApp', []);函数 MyCtrl($scope) {$scope.name = '超级英雄';$scope.creatingNew = false;$scope.newProjectActive = 函数 () {$scope.creatingNew = true;}$scope.newProject = 函数 () {警报($scope.newProjectName)；}}

解决方案

首先，当我看着你的小提琴时，那里有你的例子的旧版本，

第二，这实际上可能是一个原因，在该示例中，您在 1.0.1 版中使用了 angular，我相信该版本没有实现 ng-if.更新到最新版本将解决您的问题

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);
    }

}

解决方案

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

这篇关于为什么我的 ng-if 不起作用?它没有隐藏 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！