Question

我正在努力学习棱角分明的JS，而且我是一名绝对的初学者。我尝试使用ng-if指令来打印“先生或女士”或“女士”。根据他们的性别和关系状态。当我在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'
};

最后，对于包含＆＃39; true＆＃39;的字符串married的值，布尔值将是更好的选择。或者＆＃39; false＆＃39;。您可以使用ng值而不是值来实现：

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

2 个答案: