ng-if 不起作用答案

【问题标题】：ng-if does not workng-if 不起作用
【发布时间】：2017-05-02 09:58:58
【问题描述】：

在我的项目中，我遇到了 ng-if 不起作用的问题。当 $scope.edit 的值发生变化时，我想删除/添加文本字段。

我在下面的 jsfiddle 中创建了一个最简单的示例。

HTML

<div ng-app>
  <div ng-controller="TodoCtrl">
    <input type="checkbox" ng-model="edit" ng-init="edit = true">
    <div ng-bind="edit"></div>
    <div ng-if="edit">
      <input type="text" ng-model="name" size="30" placeholder="New Name" />
    </div> 
  </div>
</div>

function TodoCtrl($scope) {
  $scope.name = "Johny";
}

http://jsfiddle.net/U3pVM/32009/

【问题讨论】：

标签： angularjs angularjs-directive angular-ng-if

【解决方案1】：

您的 Fiddle 可能无法正常工作，因为您使用的是 Angular 1.0.1 which has some issue in ng-if。

解决方案 1

如果你真的在使用这个版本，你可以将ng-if替换为ng-show（这将在DOM中创建隐藏元素）。

<div ng-show="edit">

Demo on JSFiddle using ng-show

解决方案 2

无论如何，最好的解决方案是使用 Angular 1.2+ 来修复ng-repeat 中的ng-if 错误。正如您在下面的 sn-p 中看到的，我没有更改您的代码，并且可以正常工作。

Demo on JSFiddle using ng-if

【讨论】：

您能否将小提琴修复为角度 1.2+。我不知道怎么做。
@Ashwin 我已经更新了我的问题，这是你的小提琴jsfiddle.net/Mistalis/pnnzb5sm

【解决方案2】：

一些观察：

看来你的角度版本是旧的。因此，ng-if 不起作用。
如果您只想使用现有的 Angular 版本，则可以使用 ng-show 而不是 ng-if。

使用 ng-if 演示：

function TodoCtrl($scope) {
  $scope.name = "Johny";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <input type="checkbox" ng-model="edit" ng-init="edit = true">
    <div ng-bind="edit"></div>
    <div ng-if="edit">
      <input type="text" ng-model="name" size="30" placeholder="New Name" />
    </div> 
  </div>
</div>

使用 ng-show 演示：

function TodoCtrl($scope) {
  $scope.name = "Johny";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <input type="checkbox" ng-model="edit" ng-init="edit = true">
    <div ng-bind="edit"></div>
    <div ng-show="edit">
      <input type="text" ng-model="name" size="30" placeholder="New Name" />
    </div> 
  </div>
</div>

【讨论】：

【解决方案3】：

改用 ng-show

<div ng-show=edit>
      <input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>

DEMO

使用 ng-if 更新 Angular 版本 1.2 或更高版本

angular.module('myApp', [])
.controller('TestCtrl', function($scope) {
   $scope.name = "Johny";
  });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="TestCtrl">
    <input type="checkbox" ng-model="edit" ng-init="edit = true">
    <div ng-bind="edit"></div>
    <div ng-show=edit>
      <input type="text" ng-model="name" size="30" placeholder="New Name" />
    </div> 
</body>
</html>

【讨论】：

我无法在我的项目中隐藏/显示。我需要完全添加或删除。
即使你使用 ng-if 也一样
@Ashwin 查看演示