ANGULAR JS of-if

Question

我正在尝试学习 angular JS，我绝对是 beginner.I 尝试使用 ng-if 指令根据他们的性别和关系打印 'Mr or Mrs or Ms' status.When 我将已婚模型绑定在 div 标签内，它给出了正确的值。但是之后的绑定每次都打印为真。还有其他方法可以检查条件吗？此外，我尝试使用控制器检查条件，为什么不起作用？请帮忙！

<body ng-app="myApp" ng-controller="myFirstController" ng- init="first='';last='';gender='Male';married='true'">
    <input type="text" data-ng-model="first">
    <input type="text" data-ng-model="last">

    <label for="gender">GENDER </label>
    <input type="radio" name="gender" data-ng-model="gender" value="Male" /> MALE
    <input type="radio" name="gender" data-ng-model="gender" value="Female" /> FEMALE
    <br>
    <br>

    <div ng-if="gender==='Female'">
        <input type="radio" name="married" data-ng-model="married" value="true" /> MARRIED
        <input type="radio" name="married" data-ng-model="married" value="false" /> UNMARRIED
        <br>
        <br> {{married}}

    </div>
    <span ng-if="gender==='Male'">MR.</span>
    <span ng-if="gender!=='Male'">
    <span ng-if="married=='true'">MRS.</span>
    <span ng-if="married=='false'">MS.</span> </span>{{first }} {{last}} {{married}}
    <div ng-app="" ng-init="myCol='lightblue'">

Answer 1

问题是您的检查是针对像 <span ng-if="married=='true'">MRS.</span> 这样的字符串，但是输入复选框的 ng-model 将它绑定到布尔值 true 或 false。因此，以这样一种方式更改您的代码，即无论在哪里检查 true 或 false，它都应该是布尔值而不是字符串 'true' 或 'false'

这个

<span ng-if="married=='true'">MRS.</span>
<span ng-if="married=='false'">MRS.</span>

应该是

<span ng-if="married">MRS.</span>
<span ng-if="!married">MRS.</span>

Answer 2

将您的 ng-if="gender==='Female'" 替换为 ng-show="gender==='Female'"，它将正常工作。

原因是ng-if创建了自己的子作用域，因此married属性是在这个子作用域而不是控制器作用域上设置的。

适当的修复是避免直接绑定到作用域的属性，而是绑定到作用域中对象的属性：

在你的控制器中：

$scope.model = {};

在您看来：

<input type="radio" name="married" data-ng-model="model.married" value="true"/>

（当然，您所有的财产都一样）。

你也不应该使用 ng-init。只需从您的控制器初始化您的模型：

$scope.model = {
  gender: 'Male',
  married: 'false'
};

最后，布尔值对于 married 的值比包含 'true' 或 'false' 的字符串更好。您可以使用 ng-value 而不是 value:

<input type="radio" name="married" data-ng-model="married" ng-value="true"/> 
MARRIED 
<input type="radio" name="married" data-ng-model="married" ng-value="false"/> 
UNMARRIED

<span ng-if="married">MRS.</span>
<span ng-if="!married">MS.</span>

Complete demo

ANGULAR JS of-if

ANGULAR JS ng-if

angularjs

angular-ng-if