CODEWITHSUNDEEP
arraysangularjsformsbindingtextbox
Pola
Pola

Reputation: 143

AngularJS populate textbox from array

I am facing a problem with AngularJS. I have made an application where a user can select a value from a dropdown list. If the user presses the "add" button, then an array is created that holds all his selections. I want to populate a textbox with all these selections. I have tried ng-repeat but it creates multiple textbox with each array value. This is what I've made so far:

Controller

$scope.multiCompare= [];

// Create the function to push the data into the "multiCompare" array
$scope.newCompare = function () {

    $scope.multiCompare.push($scope.compareDate);


    $scope.multiComparedate = '';



};

HTML

<div class="form-group">
                <label for="installation_year" class="col-sm-2 control-label">Period</label>
                <div class="col-sm-4">
                    <select class="form-control" ng-model="compareDate" ng-options="res for res in compareDates " ng-disabled="disableFormInput()" ></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default" ng-click="newCompare()">Add</button>
                     </div>
            </div>
            <div class="form-group">
                <label for="from_date" class="col-sm-2 control-label">Compare</label>
                <div class="col-sm-4">
                    <div ng-repeat="num in multiCompare" track by $index>
                        <input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
                        <div> {{num}}</div>
                    </div>
                </div>

The first image shows the result I'm getting when adding 2013 and 2014 and the second shows what I would like it to return.

This is the result I'm getting

This is what I want it to show

Can someone help me through this? Thanks in advance..

Upvotes: 1

Views: 2835

Answers (2)

Pola
Pola

Reputation: 143

I have managed to do what I wanted. I changed my html code to this:

<div class="form-group">
                <label for="from_date" class="col-sm-2 control-label">Compare</label>
                <div class="col-sm-4">
                    <div data-ng-repeat="num in multiCompare" track by $index>
                        <input class="form-control" type="text" ng-model="multiCompare" ng-list {{num}} ng-show="$last" />
                    </div>
                </div>
            </div>

And it worked! Your ng-list suggestion was really helpful! Thank you very much!

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

For rendering your Compare field input, you can take use of ngList directive. That will bind your comma(,) separated output directly to the input element.

Change

<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
    <div ng-repeat="num in multiCompare" track by $index>
        <input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
        <div> {{num}}</div>
    </div>
</div>

TO

<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
    <input class="form-control" type="text" ng-model="multiCompare" ng-list/>
</div>

This could help you, Thanks.

Upvotes: 1

Related Questions