AngularJS select value from options and add to array

Question

I am new with AngularJS. I want to add values into array and display those in table after clicking on Save button. One is select Menu and other is TextBox. Presently, I am able to add text value but not able to get selected value. Here is what I have:

clusterController.js

apsApp.controller('clusterController', function ($scope) {

var uid = 4;
$scope.clusters=[
               {id:0, 'environment':'DEV', 'cluster':'cluster1'},
               {id:1, 'environment':'PROD', 'cluster':'cluster2'},
               {id:2, 'environment':'QA', 'cluster':'cluster3'},
               {id:3, 'environment':'Linux_Dev', 'cluster':'cluster4'}
            ];

//add new cluster
 $scope.saveNewClust = function() {

        if($scope.clust.id == null) {
        //if this is new contact, add it in contacts array

        $scope.clust.id = uid++;
        $scope.clusters.push($scope.clust);
        } 
        else {
        //for existing contact, find this contact using id
        //and update it.
        for(i in $scope.clusters) { 
            if($scope.clusters[i].id == $scope.clust.id) {
            $scope.clusters[i] = $scope.clust;              
                }
            }  
        };

        //clear the add contact form
        $scope.clust = {};
    };

    //delete cluster
    $scope.remove = function(id) {
        //search contact with given id and delete it
        for(i in $scope.clusters) {
            if($scope.clusters[i].id == id) {
                confirm("This Cluster will get deleted permanently");
                $scope.clusters.splice(i,1);
                $scope.clust = {};
            }
        }     
    };

    $scope.edit = function(id) {
        //search contact with given id and update it
            for(i in $scope.clusters) {
                if($scope.clusters[i].id == id) {
                    //we use angular.copy() method to create 
                    //copy of original object
                    $scope.clust = angular.copy($scope.clusters[i]);
                }
            }
        };

   });

cluster.html

<div class="maincontent">
                    <div class="article">
                    <form>
                        <section>
                            <!--  Environment -->
                            <div class="col-md-6">
                                <label>Environment:</label>

                                 <select ng-model="selectedEnvi" class="form-control" ng-options="clust.environment for clust in clusters">
                                    <option value='' disabled selected style='display:none;'>
                                        Select Environment
                                    </option>
                                 </select>

                            </div>

                            <!--  cluster Name -->
                            <div class="col-md-6">
                                <label>Cluster Name:</label>
                                <input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required>
                                <br/>
                                <input type="hidden" ng-model="clust.id" />

                            </div>
                        </section>
                            <!-- submit button -->  
                        <section class="col-md-12">
                            <button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
                        </section>
                    </form> 
                    </div>                      
                    <!--  table -->
                    <div class="article">
                         <table class="table table-bordered table-striped">
                            <tr>
                                <th colspan="3">
                                    <div class="pull-left">Cluster Info</div>
                                </th>
                            </tr>
                            <tr>
                                <th>#</th>
                                <th>Environment</th>
                                <th>Cluster</th>

                            </tr>
                            <tr ng-repeat="clust in clusters">
                                <td>{{}}</td>
                                <td>{{clust.environment}}</td>
                                <td>{{clust.cluster}}</td>

                            </tr>
                        </table>                                                        
                    </div>                      
                </div>

can you provide a jsfiddle or plnkr?

23tux
– 23tux

2014-05-28 13:14:11 +00:00
Commented May 28, 2014 at 13:14 — 23tux
– 23tux, Commented May 28, 2014 at 13:14

meberhard · Accepted Answer · 2014-05-28 13:46:39Z

1

First of all, make an own array for the possible selections of the environment selections. Right now you get the possible values from an existing list of clusters (you can leave it like this of course, but I find it confusing!). Let's just go with the following:

        $scope.environments = [
            {name: 'DEV',},
            {name: 'PROD',},
            {name: 'QA',},
            {name: 'Linux_Dev'}
        ];

Furthermore, you need to preselect an environment in ngModel for the select values. We need to do this, because after the page is loaded, the select box maybe shows "DEV", but it doesn't set the ngModel to "DEV". It only updates the ngModel after manually selecting a value.

Set it like this:

$scope.selectedEnvironment = $scope.environments[0];

This sets the model "selectedEnvironment" to {name: "Dev"}.

The selection box:

<select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments">
    <option disabled value="">-- choose environment --</option>
</select>

I set the model to "selectedEnvironment", so the preselection from the controller will work. I also changed hg-options to use the JSON which contains the environment names.

The last thing to do is a minor change on the "saveNewClust" function:

if ($scope.clust.id == null) {
    //if this is new contact, add it in contacts array

    $scope.clust.id = uid++;
    $scope.clust.environment = $scope.selectedEnvironment.name;
    $scope.clusters.push($scope.clust);
}

What happens: We just give the name of the environment to $scope.clust.environment.

I made a fiddle containing the working demo: http://jsfiddle.net/hs6Rz/9/

answered May 28, 2014 at 13:46

meberhard

1,8451 gold badge20 silver badges25 bronze badges

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

2 Comments

Avi Over a year ago

Thanks its working good now. I having new issues. When I click on edit link provided in last column of every row, the values should get copied from the row to form field and Select menu should get disable. For now the only text value is getting copied but not select menu value. How I will get those values, I am using edit function to copy the values.

meberhard Over a year ago

If it's working, accept the answer please. In your demo there is no edit link. Make another demo where you demonstrate, what you already did and post this.

Collectives™ on Stack Overflow

AngularJS select value from options and add to array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related