HTML选择上的AngularJs ng-options不绑定到模型答案

【问题标题】：AngularJs ng-options on HTML select does not bind to modelHTML选择上的AngularJs ng-options不绑定到模型
【发布时间】：2018-06-21 18:56:29
【问题描述】：

我是 Angularjs 的新手，我一直试图让我的第一个 Angularjs 屏幕工作几天，但没有成功。我的屏幕相当简单。这是一个带有几个 html 选择下拉菜单的 jsp 页面。我还实现了三个 javascript 模块，即应用程序、控制器和服务模块。加载页面时，控制器（通过服务模块）调用驻留在我的 Java EE 后端的 Web 服务以带回数据以填充页面上的两个 HTML 选择元素。我已经验证该调用确实有效，并且控制器以正确的 JSON 格式接收数据，即 id、name 对列表。但是，不会填充两个 HTML 选择。我一直无法弄清楚为什么绑定不起作用。有人可以帮忙吗。下面是我的 JSP 页面和我的控制器。

以下是我的 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>

以下是 sales_invoice_controller.js 的代码。如上所述，对 SelectOptionService.fetchCustomerOptions() 和 SelectOptionService.fetchIncomeCategoryOptions() 的调用都在变量“d”中返回有效数据。它只是不会出现在 Select 控件中。

'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');
            }
        );
    }

}]);

【问题讨论】：

我刚刚发现为什么我的选择选项没有填充。这是因为我正在应用 JQuery 样式： $(function() { //在您的 HTML 选择框上调用 selectBoxIt 方法。$("select").selectBoxIt({ // 使用 jQueryUI 主题作为下拉主题：" jquerymobile" }); });

标签： html angularjs select ng-options

【解决方案1】：

我刚刚发现为什么我的选项没有填充。这是因为我还对我的选择控件应用了 JQuery 修改，如下所示：-

$(function() {
   //Calls the selectBoxIt method on your HTML select box.
   $("select").selectBoxIt({
      // Uses the jQueryUI theme for the drop down
      theme: "jquerymobile"
   });
});

删除此代码后会填充控件选项。

【讨论】：