Student  Arya Student Arya - 5 months ago 43
AngularJS Question

ng-model not working in select tag under ng-repeat

This is html page

<form name="createPromoterFormName">
<div class="col s12" ng-repeat="customer in model.customers" ng-if="model.selectedCustomerSubtab == $index">
<div class="row inputcontainer">
<div class="input-field col s4">
<input placeholder="First Name" type="text" ng-model="customer.customer_name" class="validate" ng-maxlength="50" ng-required="true" />
<label class="active labelName">Customer Name </label>
</div>
<div class="input-field col s4">
<input type="text" class="validate" ng-maxlength="50" ng-required="true" ng-model="customer.avg_monthly_sales" />
<label class="active labelName">Average Monthly Sales </label>
</div>
<div class="input-field col s4">
<select ng-model="customer.avg_payment_cycle_days" ng-options="i.value as i.value for i in model.avgPaymentCycleDays" ng-change="changeSelectedItem()">
<option value="">Select Average Payment Cycle Days</option>
</select>
<label class="labelName">Avg Payment Cycle Days [[customer.avg_payment_cycle_days]]</label>
</div>
</div>
<div class="row inputcontainer">
<div class="input-field col s4">
<input type="text" class="validate" ng-maxlength="50" ng-model="customer.avg_paymmonths_in_business_with_customerent_cycle_days" />
<label class="active labelName">Months in business with customer</label>
</div>
</div>
</div>
</form>


Controller.js

$scope.model = {
customers: [{
customer_name: "",
avg_monthly_sales: "",
avg_payment_cycle_days: "",
months_in_business_with_customer: ""
}, {
customer_name: "",
avg_monthly_sales: "",
avg_payment_cycle_days: "",
months_in_business_with_customer: ""
}, {
customer_name: "",
avg_monthly_sales: "",
avg_payment_cycle_days: "",
months_in_business_with_customer: ""
}],
avgPaymentCycleDays : [{
value: '15',
id: '1'
}, {
value: '30',
id: '2'
}, {
value: '45',
id: '3'
}, {
value: '60',
id: '4'
}, {
value: '75',
id: '5'
}, {
value: '90',
id: '6'
}],
selectedPromoterSubtab: 0,
selectedCustomerSubtab: 0,
}


$scope.changeSelectedItem = function() {
console.log($scope.model.customers);
}


enter image description here
I am using material css. When I am selecting option, ng-change is not getting trigger and also not binding data to ng-model.

Can anybody help me where am I making mistakes?

This is plnkr link

Answer

The issue is the order in which you have included the script file.

Check the plunker.

https://plnkr.co/edit/eFL48s3UyhwdTFzwTR05

the ng-model is binding properly and the ng-change is also getting fired properly.

<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>