CODEWITHSUNDEEP
angularjsangularjs-ng-repeatjquery-chosen
Srinivasan
Srinivasan

Reputation: 303

Chosen JS not working with Angular JS Repeat

I trying to include chosen js library in to my project where i use select html tag. Its working with simple selection list, but when i try to populate list using angular js ng-repeat , its not working. Please help me where i gone wrong. below is my code.

<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>

Upvotes: 0

Views: 556

Answers (1)

CIPHER007
CIPHER007

Reputation: 376

I think you have to use ng-model with ng-options in your select tag. Try like below code: 

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

You can check my running snippet here. I removed your api call and enter value manually

<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>

Upvotes: 1

Related Questions