ng-if 不起作用

Question

在我的项目中，我遇到了 ng-if 无法正常工作的问题。当 $scope.edit 的值更改时，我想 remove/add 文本字段。

我在下面的 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>

JS

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

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

Answer 1

改用 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>

Answer 2

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

解决方案 1

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

<div ng-show="edit">

Demo on JSFiddle using ng-show

解决方案 2

无论如何，最好的解决方案是使用 Angular 1.2+，它修复了 ng-repeat 中的 ng-if 个错误。正如您在以下代码片段中看到的，我没有更改您的代码，而且它有效。

Demo on JSFiddle using ng-if

Answer 3

一些观察：

看来您的 angular 版本太旧了。因此，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>

ng-if 不起作用

ng-if does not work

angularjs

angularjs-directive

angular-ng-if

解决方案 1

解决方案 2