如何将两个输入合并为一个值并绑定？

Question

I use 2 Inputs to define an age. Both values should be passed to a new input which is alread binded to rule.data . Is that possible? I'm new with angularjs and probably I have a flaw. Thanks for your tips

HTML

            <input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
            <input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.to"/>
            <input type="text" class="form-control input-sm" ng-model="rule.data" value="between {{age.from}} and {{age.to}}" />

Answer 1

I do not really understand why you want to use an <input> to format a text with the values of min and max.

You would rather do this, no ?

<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<span>between {{age.from}} and {{age.to}}</span>

Does this work for you ?

---

If the string is just a placeholder for the user age value, you should do this instead :

<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" placeholder="between {{age.from}} and {{age.to}}" />

---

If you need to get the final string into the model, you can do something like this then:

<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" ng-init="rule.data = 'between ' + age.from + ' and ' + age.to" />

(I assume you do not have a controller to initialize the model properly. If you do, then just add this kind of line inside : $scope.rule.data = 'between ' + $scope.age.from + ' and ' + $scope.age.to; . it should do the trick.)

Answer 2

can vary with many solutions, you can add a custom filter at third combined result ,

     <input type="text" class="form-control input-sm" ng-model="rule.data | customFilter:age.from:age.to" value="between {{age.from}} and {{age.to}}" />

    app.filter('customFilter',function(){
    return function(input ,fromage,toage){
       //your code for between
        return //your calculated age
    }

});