Question

我尝试将选择的js库包含到我使用select html标签的项目中。它使用简单的选择列表，但当我尝试使用角度js ng-repeat填充列表时，它不起作用。我帮我错了。下面是我的代码。

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="docsupport/style.css">
    <link rel="stylesheet" href="docsupport/prism.css">
    <link rel="stylesheet" href="chosen.css">
</head>

<body ng-app="testapp" ng-controller = "testController">
    <select chosen class="chosen-select" ng-options = "cust.CustName for cust in customers">

    </select>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js" type="text/javascript"></script>
      <script src="chosen.jquery.js" type="text/javascript"></script>
      <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
      <script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">    </script>

      <script type="text/javascript">
        var app = angular.module('testapp', []);
        app.controller('testController',['$scope','$http', function($scope,$http)    
        {
            $http.get("php/getCustomerList.php")
            .then (function(response)
            {
                $scope.customers = response.data;               
            });
        }]);
      </script>
</body>
</html>

Answer 1

我认为您必须在ng-model标记中使用ng-options和select。尝试以下代码：

<select chosen class="chosen-select" ng-model="mySelectBox" ng-options = "cust.CustName for cust in customers">

您可以在此处查看我的正在运行的代码段。我删除了你的api电话并手动输入值

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="docsupport/style.css">
    <link rel="stylesheet" href="docsupport/prism.css">
    <link rel="stylesheet" href="chosen.css">
</head>

<body ng-app="testapp" ng-controller = "testController">
    <select chosen class="chosen-select" ng-model="mySelect" ng-options = "cust.CustName for cust in customers">

    </select>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js" type="text/javascript"></script>
      <script src="chosen.jquery.js" type="text/javascript"></script>
      <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
      <script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">    </script>

      <script type="text/javascript">
        var app = angular.module('testapp', []);
        app.controller('testController',['$scope','$http', function($scope,$http)    
        {
                $scope.customers = [{'CustName':'Angular'},{'CustName':'JavaScript'},{'CustName':'Java'}];               
        }]);
      </script>
</body>
</html>

选择JS不使用Angular JS Repeat

1 个答案: