1

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..

Improve this question
1
  • can you provide the compareDates & multiCompare array? Commented Feb 3, 2015 at 18:28

2 Answers 2

Reset to default
1

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.

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

10 Comments

The multiCompare array is populated with the selected dropdown-Period value every time a user clicks the add button, and I want this array to be binded with a textbox, in a comma separated output. Unfortunately the code above does not work in my case...
what multiCompare array does contain? can you give me some sample.. i was thinking it contains [2013,2014]
@Olgapoliti if my answer does helpful then mark it as correct...I'll edit my answer..is it ok for you?
I gave it a +1, since it was helpful, but was not the answer that solves my problem. Since I had a hard time finding the answer to this problem, I wouldn't want you to edit your answer. Besides, a +1 is always a reward...
@Olgapoliti i asked you for get me the sample array because i didn't aware of multiCompare, i was waiting for you response. but you didn't gave me. And you question is also not that much clear..not explaining the problem correctly. Ok Thanks for vote up. :)
|
1

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!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.