CODEWITHSUNDEEP
angularjsangularjs-scope
Naushad Ahmad
Naushad Ahmad

Reputation: 486

ng-model value of select element is undefined

Here is my View In whichI have 3 drop downs. That I am trying to fetch value in my controller where I am getting 'undefined'

<div class="row">
    <div class="input-field col s12">
        <select ng-model="newRecord.newBaseTemplate" id="newBaseTemplate">
            <option value="" disabled selected>Choose Base Template</option>
            <option>A</option>
            <option>B</option>
            <option>D</option>
        </select>
        <label>Choose your Base Template</label>
    </div>
</div>
<div class="row"> 
   <div class="input-field col s12 " >
        <select ng-model="newRecord.newProcessElement">
            <option value="" disabled selected>Choose Process Element</option>
            <option>PE1</option>
            <option>PE3</option>
            <option>PE6</option>
        </select>
        <label>Choose Your Process Element</label>
    </div>
</div>
<div class="row"> 
    <div class="input-field col s12">
        <select ng-model="newRecord.newScreenName">
            <option value="" disabled selected>Choose Screen Name</option>
            <option>ACTION_BAR</option>
            <option>DETAIL_GROUP</option>
            <option>NORMAL_VIEW</option>
        </select>
    <label>Choose Your Screen Name</label>
    </div>
</div>

In controller I am fetching value in addNew method that is call when add new button click in my view: 

$scope.newRecord = {
    'newBaseTemplate' : 'A',
    'newProcessElement' : 'PE6',
    'newScreenName' : 'ACTION_BAR'
};
$scope.addNew = function(){
    var id = $scope.records.length + 1;
    id = 'record' + id;
    console.log($scope.newRecord.newBaseTemplate);
    console.log($scope.newRecord.newProcessElement);
    console.log($scope.newRecord.newScreenName);
    $scope.records.push({
        id : id,
        baseTemplate : $scope.newRecord.newBaseTemplate,
        processElement : $scope.newRecord.newProcessElement,
        screenName : $scope.newRecord.newScreenName
    });
};

Upvotes: 2

Views: 2020

Answers (3)

Vallad&#227;o
Vallad&#227;o

Reputation: 347

I don't know if it is elegant but I could solve a similar situation using:

var newBaseTemplate = angular.element(document.getElementById('newBaseTemplate')[0]).val();

Then you can attach the newBaseTemplate whatever you need, like:

$scope.newBaseTemplate = newBaseTemplate;

Upvotes: 0

Ayubxon Ubaydullayev
Ayubxon Ubaydullayev

Reputation: 349

Try this,

<div class="row"> 
       <div class="input-field col s12 topMargin" >
            <select ng-model="d.newPE">
                <option value="" disabled selected>Choose Process Element</option>
                <option>PE1</option>
                <option>PE3</option>
                <option>PE6</option>
            </select>
            <label>Choose Your Process Element</label>
        </div>
    </div>

initialize In controller

$scope.d = {};

and get

$scope.d.newPE

Upvotes: 1

Deadpool
Deadpool

Reputation: 8240

See the following example.It works perfectly: 

<html>
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>  
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
<select ng-model="name">
    <option>Peter</option>
    <option>Jenny</option>
</select>
{{name}}
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.name="Please Select"
});
</script> 
</body> 
</html>

Upvotes: 0

Related Questions