Question

在我的项目中，我遇到的问题是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>

JS

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

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

Answer 1

您的小提琴可能无效，因为您使用的是 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-if中的ng-repeat个错误。正如您在下面的代码片段中看到的那样，我没有更改您的代码，而且它可以正常工作。

Demo on JSFiddle using ng-if

Answer 2

一些观察结果：

似乎你的角度版本已经过时了。因此，ng-if无效。
如果您只想使用现有的角度版本，则可以使用ng-show代替ng-if。

使用ng-if进行演示：

＆＃13;

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

＆＃13;

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

＆＃13;

使用ng-show进行演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用ng-show代替

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

<强> DEMO

使用ng-if

更新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不起作用

3 个答案:

解决方案1

解决方案2

ng-if不起作用

3 个答案:

解决方案1 ​​

解决方案2

解决方案1