Menu
How to call angular function when data in text box? here is my code
html
<!DOCTYPE html!> <html xmlns:ng="http://angularjs.org" data-ng-app="flightSearch" lang="en"> <head> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/app.js"></script> </head> <body> <div data-ng-controller="flightSearchController"> <input type="text" data-ng-model="query" data-ng-change="flightSearch()" placeholder="e.g RGN>MDL, KAW>RGN" id="targetTextField" /> <input id="options3" type="text" style="display:none;"/> <select id="options"> <option value="From" selected>From</option> <option value="RGN" ng-click="flightSearch()">RGN</option> <option value="NYU" ng-click="flightSearch()">NYU</option> <option value="MDL" ng-click="flightSearch()">MDl</option> <option value="HEH" ng-click="flightSearch()">HEH</option> </select> <select id="options2"> <option value="To" selected>To</option> <option value=">RGN" ng-click="flightSearch()">RGN</option> <option value=">NYU" ng-click="flightSearch()">NYU</option> <option value=">MDL" ng-click="flightSearch()">MDl</option> <option value=">HEH" ng-click="flightSearch()">HEH</option> </select> <ul> <li data-ng-repeat="route in filteredItems"> <div data-ng-bind-html="route.displayRoute"></div> </li> </ul> </div> </body> js
<script src="js/angular.min.js"></script> <script src="js/angular-sanitize.min.js"></script> <script type="text/javascript"> function buildPaths(route){ var points = route.split(">"); var paths = {}; for(var i = 0; i < points.length; i++){ var from = points[i]; for(var j = i; j < points.length; j++){ var to = points[j]; if (from != to){ if(paths[from + ">" + to]){ if(j-i < paths[from + ">" + to][0]) paths[from + ">" + to] = [j-i,points.slice(i,j+1).join(">")] }else{ paths[from + ">" + to] = [j-i,points.slice(i,j+1).join(">")] } } }//for j }//for i return paths; } var flightSearch = angular.module('flightSearch',['ngSanitize']); flightSearch.controller('flightSearchController', function ($scope){ // Data definitions, route is actual data, // display route is for higlight display purpose only. var dataRoutes = [ {route: "RGN>NYU>MDL>HEH>RGN", displayRoute: "", paths: []}, {route: "RGN>HEH>KYT>THK>KYT>HEH>RGN", displayRoute: "", paths: []}, {route: "RGN>MDL>HEH>NYU>RGN", displayRoute: "", paths: []}, {route: "RGN>MDL>STW>RGN", displayRoute: "", paths: []}, {route: "RGN>NYU>MDL>MYT>PTO>MYT>MDL>NYU>RGN", displayRoute: "", paths: []}, {route: "RGN>HEH>NYU>MDL>RGN", displayRoute: "", paths: []}, {route: "RGN>TVY>MGU>KAW>MGU>TVY>RGN", displayRoute: "", paths: []}, {route: "RGN>TVY>KAW>TVY>RGN", displayRoute: "", paths: []}, {route: "RGN>KAW>MGU>TVY>RGN", displayRoute: "", paths: []}]; // Pre-calculate the possible path the shortest distance for(var r = 0; r< dataRoutes.length; r++){ dataRoutes[r]["paths"] = buildPaths(dataRoutes[r]["route"]); dataRoutes[r]["displayRoute"] = dataRoutes[r]["route"]; } // Assign the routes. This is unfiltered origintal data (all) $scope.routes = dataRoutes; // This is filtered list for dispaly $scope.filteredItems = $scope.routes; // Search/filter function. This updates filteredItems list $scope.flightSearch = function(){ if($scope.query.length > 6){ $scope.filteredItems = []; for(var index in $scope.routes){ $scope.routes[index]["displayRoute"] = $scope.routes[index]["route"]; if($scope.routes[index]["paths"][$scope.query] !== undefined){ var match = $scope.routes[index]["paths"][$scope.query][1];$scope.query $scope.routes[index]["displayRoute"] = $scope.routes[index]["route"].replace(match,"<b>" + match + "</b>"); $scope.filteredItems.push($scope.routes[index]); } } }else{ for(var r = 0; r< $scope.routes.length; r++){ $scope.routes[r]["displayRoute"] = $scope.routes[r]["route"]; } $scope.filteredItems = $scope.routes; } } }); flightSearch.filter("highlight",function(){ return function(text){ return text; } }); </script> <script type="text/javascript"> $(function() { $("#options").change(function(){ setTarget() }); $("#options2").change(function(){ setTarget(); }); $("#options3").change(function(){ setTarget(); }); $("#targetTextField").change(function(){ setTarget(); }); }); function setTarget(){ var tmp = $("#options").val(); tmp += $("#options2").val(); tmp += $("#options3").val(); $('#targetTextField').val(tmp); } </script> </html> when two select option insert data in text box want to call search function on change.strong text
867
AngularJS is widely used for single page application development as it provides MVC architecture with data model binding. On the other hand, Bootstrap uses HTML, CSS, and JavaScript for its development which makes it comparatively faster.
You can access the scope of an angular element if you have an ID tag attached to the same DOM element as the ng-controller:
the DOM:
<div id="mycontroller" ng-controller="mycontroller"></div> your controller:
function mycontroller($scope) { $scope.myfunction = function() { //do some stuff here } } in jquery you do this and it will access that controller and call that function :
angular.element('#mycontroller').scope().myfunction(); Do remember to call
angular.element('#mycontroller').scope().$apply() if you update a function variable within scope in myfunction, it will not work otherwise (thanks @andersh)
126
if you use in your code something like this
<div id="mycontroller" ng-controller="mycontroller as child"></div> instead of
<div id="mycontroller" ng-controller="mycontroller"></div> the access will be
angular.element('#mycontroller').scope().child.myFunction(); instead of
angular.element('#mycontroller').scope().myFunction(); in every case you also need the call
angular.element('#mycontroller').scope().$apply(); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
