AngularJs ng-options on HTML select does not bind to model
Question
I am new to Angularjs and I have been trying to get my first Angularjs screen to work for a few days now without success. My screen is fairly simple. It is a jsp page with a couple of html select dropdowns. I have also implemented three javascript modules, namely application, controller and service modules. When the page is loaded, the controller (via the service module) calls web services residing on my Java EE backend to bring back data to populate my two HTML select elements on the page. I have verified that the call does work and the controller receives the data in the correct JSON format, ie lists of id,name pairs. However, the two HTML selects do not get populated. I have not been able to figure out why the binding does not work. Can someone please help. Below are my JSP page and my Controller.
Following is my salesInvoice.jsp:
<HTML>
<HEAD>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</HEAD>
<BODY>
<div align="center" ng-app="salesInvoiceApp" class="ng-cloak">
<div class="generic-container" ng-controller="SalesInvoiceController as ctrl" >
<table>
<tr>
<td><label>Customer</label></td>
<td>
<select size="1" name="customerId" ng-model="ctrl.customer" ng-
options="item.name for item in ctrl.customers track by item.id">
<option value="">-- Select Customer --</option>
</select>
</td>
</tr>
<tr>
<td><label>Category</label></td>
<td>
<select size="1" name="categoryId" ng-model="ctrl.category" ng-
options="item.name for item in ctrl.incomeCategories track by
item.id">
<option value="">-- Select Income Category --</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<script src="<c:url value='/scripts/angularjs/app/salesinvoice/sales_invoice_app.js' />"></script>
<script src="<c:url value='/scripts/angularjs/service/sales_service.js' />"></script>
<script src="<c:url value='/scripts/angularjs/service/select_option_service.js' />"></script>
<script src="<c:url value='/scripts/angularjs/app/salesinvoice/sales_invoice_controller.js' />"></script>
<BODY>
<HTML>
Following is the code for sales_invoice_controller.js. As mentioned above, calls to SelectOptionService.fetchCustomerOptions() and SelectOptionService.fetchIncomeCategoryOptions() both return valid data back in the variable 'd'. It just does not end up in the Select controls.
'use strict';
angular.module('salesInvoiceApp').controller('SalesInvoiceController', ['$scope', '$window', 'SelectOptionService', 'SalesService', function($scope, $window, SelectOptionService, SalesService) {
var self = this;
self.customers=null;
self.customer=null;
self.incomeCategories=null;
self.category=null;
self.invoice={ id:0, invoiceNumber:'INV0001000', invoiceDate:'', customerId:0, categoryId:0 };
fetchCustomerOptions();
fetchCategoryOptions();
function fetchCustomerOptions() {
SelectOptionService.fetchCustomerOptions().then (
function(d) {
self.customers = d;
},
function(errResponse) {
console.error('Error while fetching customers');
}
);
}
function fetchCategoryOptions() {
SelectOptionService.fetchIncomeCategoryOptions().then (
function(d) {
self.incomeCategories = d;
},
function(errResponse) {
console.error('Error while fetching income categories');
}
);
}
}]);
1 answers
solution1
0 2018-01-16 04:51:36
I just discovered why my options were not populating. It is because I was also applying JQuery modifications to my select controls as follows:-
$(function() {
//Calls the selectBoxIt method on your HTML select box.
$("select").selectBoxIt({
// Uses the jQueryUI theme for the drop down
theme: "jquerymobile"
});
});
The control options are populated after removing this code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.