Question

我有这个非常简单的代码。 filterOption = 'Account ID'，当值正确时，输入出现。但是ng-model无效，我看不到任何预告片

<pre>{{test}}</pre> // doesnt work
<pre> {{filterOption}}</pre> // this shows Account ID
<input ng-if="filterOption == 'Account ID'" ng-model="test" required>

Answer 1

为您的控制器设定范围并为其分配controllerA将解决此问题。请参见https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md了解更好的编码风格，以免遇到这些问题。

<!DOCTYPE html>
<html ng-app="abc">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-controller="MyCtrl as vm">
<pre>{{vm.test}}</pre> // doesnt work
<pre> {{vm.filterOption}}</pre> // this shows Account ID
<input ng-if="vm.filterOption === 'Account ID'" ng-model="vm.test" required>

</div>
<script>

var app=angular.module('abc',[]);

app.controller('MyCtrl',MyCtrl);

function MyCtrl($scope){
 var vm = this;
 vm.filterOption = "Account ID";
}

</script>

Answer 2

ng-if有其自己的子作用域，它可以销毁和还原作用域元素。因此，您的模型需要到达父范围（通常是控制器），可以使用$parent前缀

这是一个示例：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app>

  <input type="text" ng-if="true" ng-model="a"> Doesn't work
  <br>
  <input type="text" ng-if="true" ng-model="$parent.a"> Works
  <br> 
  {{a}}

</div>

Answer 3

检查此。 ng-if创建自己的范围。因此，如果要与ng-if一起使用ng-model，请使用$ parent

<!DOCTYPE html>
<html ng-app="abc">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-controller="myCtrl">
<pre>{{test}}</pre> // doesnt work
<pre> {{filterOption}}</pre> // this shows Account ID
<input ng-if="filterOption == 'Account ID'" ng-model="$parent.test" required>

</div>
<script>
var app=angular.module('abc',[]);
app.controller('myCtrl',function($scope){
$scope.filterOption="Account ID";
});
</script>
</body>
</html>

Answer 4

您需要使用控制器来访问模板中的属性。这里的例子： https://stackblitz.com/edit/sof-angularjs-5jwgpu?file=home%2Fhome.html

具有Ng-If的Ng-Model不起作用（非常基本的示例）

4 个答案: