javascript - How to use ternary operator to change value of ng-model in AngularJS? - Stack Overflow

admin管理员组

文章数量:1391974

I have one text field and one checkbox. If checkbox is true I want value from address field to bee after the checkbox, if false the field should be empty. I tried ternary operator with ng-class and many more, but no luck. What would be the best and working solution for that?

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>

I have one text field and one checkbox. If checkbox is true I want value from address field to bee after the checkbox, if false the field should be empty. I tried ternary operator with ng-class and many more, but no luck. What would be the best and working solution for that?

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>

• javascript
• angularjs
• ternary-operator
• ng-class

Share Improve this question Follow asked May 29, 2015 at 19:10 SamiSami 2,3411414 gold badges4747 silver badges8181 bronze badges 4

• 2 You can do some inline stuff, but why not just have a method on the controller to handle the logic for you? And then call {{putTextIWantHere()}} – Cooper Buckingham Commented May 29, 2015 at 19:15
• I am trying to learn AngularJS at the same time, but maybe I just handle it inside the controller. I was thinking that this will be easy case, but I recognised that it wasn't :) – Sami Commented May 29, 2015 at 19:18
• Oh, if you are brand new, then you are probably looking for ng-if, or ng-show. I had assumed you were talking about not using those. – Cooper Buckingham Commented May 29, 2015 at 19:19
• Those are ok as well. I implemented it to controller and it is working fine, but if you have something working in mind, I am happy to hear it, I mean without adding anything to controller. – Sami Commented May 29, 2015 at 19:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

you should use two input elements in this case. Like

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

and in your controller, please check

if($scope.isReturnAddress){
  var address = $scope.address;
}

See working fiddle here

本文标签： javascriptHow to use ternary operator to change value of ngmodel in AngularJSStack Overflow