angularjs - Chosen JS not working with Angular JS Repeat -
i trying include chosen js library in project use select html tag. working simple selection list, when try populate list using angular js ng-repeat , not working. please me gone wrong. below 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 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>
i think have use ng-model ng-options in select tag. try below code:
<select chosen class="chosen-select" ng-model="myselectbox" ng-options = "cust.custname cust in customers"> you can check running snippet here. removed api call , 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 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>
Comments
Post a Comment