选择的 JS 不适用于 Angular JS 重复答案

【问题标题】：Chosen JS not working with Angular JS Repeat选择的 JS 不适用于 Angular JS 重复
【发布时间】：2017-08-21 07:26:17
【问题描述】：

我试图将选择的 js 库包含到我使用 select html 标记的项目中。它使用简单的选择列表，但是当我尝试使用 angular 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>

【问题讨论】：

我没有看到你为chosen注入了任何东西。
查看youtube.com/watch?v=8ozyXwLzFYs

标签： angularjs angularjs-ng-repeat jquery-chosen

【解决方案1】：

我认为你必须在 select 标签中使用 ng-model 和 ng-options。试试下面的代码：

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

你可以在这里查看我正在运行的 sn-p。我删除了您的 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>

【讨论】：