如何使用三元运算符来改变AngularJS中ng-model的值?

时间:2015-05-29 19:10:34

标签: javascript angularjs ternary-operator ng-class

我有一个文本字段和一个复选框。如果checkbox为true,我希望地址字段中的值变为复选框之后,如果为false,则字段应为空。我尝试使用ng-class和更多的三元运算符,但没有运气。什么是最好的和有效的解决方案?

enter image description here

jsfiddle

<form name="form" ng-app>
<div class="form-group form-group-lg required">
    <label class="col-md-2 control-label">Address:</label>
    <div class="col-md-10" ">
        <input type="text " name="address " class="form-control " ng-model="address " ng-minlength="4 " placeholder="Address " required>
     </div>

</div>   
<div class="form-group form-group-lg">
    <label class="col-md-2 control-label">Return Address</label>

    <div class="col-md-10">
        <div class="input-group">
            <span class="input-group-addon">
               <!--condition ? first_expression : second_expression; -->
                <input type="checkbox" ng-model="isReturnAddress" ng-change="">
            </span><!--condition ? first_expression : second_expression; -->
            <input type="text" class="form-control" ng-model="address">
         </div>
 {{isReturnAddress}}
    </div>
</div> 
<button type="submit " class="btn btn-primary btn-large " ng-click="submitted=true ">Submit</button>

1 个答案:

答案 0 :(得分:3)

在这种情况下你应该使用两个输入元素。像

/manager/html

在您的控制器中,请检查

<input ng-if="isReturnAddress" type="text" class="form-control" ng-model="address">
<input ng-if="!isReturnAddress" type="text" class="form-control">

请参阅此处fiddle