Angular Binding not working with a Select Box in HTML

Question

I have prepared a simple template that displays a select box with options.

The template

<div class="jumbotron" style="background-color:white">
</div>
<div class="jumbotron container-fluid">
<h3 align="center">PAN Bulk Upload</h3>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div style="border-right:1px solid #cbc6c6">
<div class="container panel-body">
    <label class="custom-file-upload">
        <input id="fileChoose" type="file" custom-on-change="uploadFile" />
        <i class="fa fa-cloud-upload"> Choose Device Group File</i>
    </label>
    <hr/>
    <select size=5 style="width:200px;height:100px" ng-options="o as o for o in deviceGroups">
    </select>
</div>
<div class="container">
    <button ng-click="validateDeviceGroups()">Validate</button>
    <button ng-click="commitDeviceGroups()">Commit</button>
</div>
</div>
</div>
<div class="col-lg-3">
<textarea rows="20" cols="35"></textarea>
</div>
</div>
</div>

The Angular Controller

angapp.controller('panbulkCtrl', function($scope) {

    $scope.deviceGroups = ["Hi","Hello"];
    $scope.uploadFile = function() {
        var filename = event.target.files[0].name;
        var reader = new FileReader();
        reader.onload = function (e) {
            var rows = e.target.result.split("\n");
            for (var i = 0; i < rows.length; i++) {
                var cells = rows[i].split(",");
                for (var j = 0; j < cells.length; j++) {
                    console.log(cells[i]);
                    $scope.deviceGroups.push(cells[i]);
                }              
            }           
        }
        reader.readAsText(event.target.files[0]);

    };

    $scope.validateDeviceGroups = function(){

    }
});

The added strings in deviceGroups do not appear in the Select box as options. What is wrong?

tanmay · Accepted Answer · 2017-05-05 05:56:23Z

3

As per select | AngularJS docs, ngModel is required argument.

Pass that like ng-model="selected" or something and it would work!

<select size=5 style="width:200px;height:100px" ng-model="selected" 
        ng-options="o as o for o in deviceGroups">
</select>

Here's working example

answered May 5, 2017 at 5:56

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

1 Comment

tanmay Over a year ago

@PrateekNarendra check the plunker.. it does work there

Chetan · Accepted Answer · 2017-05-05 06:03:18Z

0

Please refer this. May help you try to make ng-options simpler and add ng-model for same -

var myApp = angular.module("myApp",[]);
myApp.controller("myCntr",function($scope){
$scope.deviceGroups = ["hi","hello"];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntr">
 <select multiple size=5 style="width:200px;height:100px" ng-options="o for o in deviceGroups" ng-model="selected"/>
</div>

answered May 5, 2017 at 6:03

Chetan

9425 silver badges22 bronze badges

Comments

RAj · Accepted Answer · 2017-05-08 12:48:55Z

0

Try this one ng-model="deviceGroups[0]"

answered May 8, 2017 at 12:48

RAj

712 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular Binding not working with a Select Box in HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related