AngularJS - How to string together multiple input boxes?

Question

I'm new to AngularJS I would like to string together the contents of several input text boxes. I have this fiddle:

<script>
    function MyController($scope){
        $scope.fields = {
            test : [{value: "aaa"}, {value:"bbb"}, {value:"ccc"}]
        }
    };
</script>
<div ng-app ng-controller="MyController">
    <ul>
        <li ng-repeat="field in fields.test">
            <input type="text" ng-model="field.value">
        </li>
    </ul>
    <pre>{{fields}}</pre>
</div>

http://jsfiddle.net/f3do0LLa/

I would like the value to be: aaabbbccc (also how can I adjust the code in for scenario where there could be x input boxes) Thanks

Zooly · Accepted Answer · 2018-03-23 11:41:11Z

1

You have to iterate your fields value like you do for your input text.

<span ng-repeat="field in fields.test">{{field.value}}</span>

Demo

I used span tag instead of pre because it has a default line break.

If you want to keep pre render, you can style it:

<pre ng-repeat="field in fields.test" style="display: inline;">{{field.value}}</pre>

answered Mar 23, 2018 at 11:41

Zooly

4,7974 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ori Elkobi · Accepted Answer · 2018-03-23 12:07:46Z

Its also possible to iterate using a function, in my opinion it could be more flexible and allows you to do more complex actions with the inputs.

<script>
    function MyController($scope){
        $scope.fields = {
            test : [{value: "aaa"}, {value:"bbb"}, {value:"ccc"}]
        }
        $scope.fieldsCombined=function(){
        var res='';
          angular.forEach($scope.fields.test, function(value, key) {
                     res+=value['value'];
                });
          return res;
        }
    };
</script>
<div ng-app ng-controller="MyController">
    <ul>
        <li ng-repeat="field in fields.test">
            <input type="text" ng-model="field.value">
        </li>
    </ul>
    <pre>{{fieldsCombined()}}</pre>
</div>

Panos K · Accepted Answer · 2018-03-23 18:40:34Z

http://jsfiddle.net/6jvLyg0p/ This is in case you want the concateneted string in a new model

html:

<script>
    function MyController($scope){

        $scope.fields = {
            test : [{value: "aaa"}, {value:"bbb"}, {value:"ccc"}]
        }
        $scope.$watch('fields', function(newVal){
        var tempModel = "";

        angular.forEach(newVal.test,function(val){

        tempModel = tempModel.concat(val.value);
        });
            $scope.modelNew = tempModel
        },true);
    };
</script>
<div ng-app ng-controller="MyController">
    <ul>
        <li ng-repeat="field in fields.test">
            <input type="text" ng-model="field.value">
        </li>
    </ul>
    <pre>{{fields}}</pre>
    <span>{{modelNew}}</span>
</div>

Collectives™ on Stack Overflow

AngularJS - How to string together multiple input boxes?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related