Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
<!DOCTYPE html!>
<html xmlns:ng="http://angularjs.org" data-ng-app="flightSearch" lang="en">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/app.js"></script>
</head>
<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=";"/>
<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>
<li data-ng-repeat="route in filteredItems">
<div data-ng-bind-html="route.displayRoute"></div>
</body>
<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
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)
–
–
–
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();
for accessing scope element of the controller
angular.element(document.getElementById('controllerId')).scope().scope_variable_array.push(item);
for accessing controller function
angular.element(document.getElementById('controllerId')).scope().function_name();
controllerId : tag id where the ng-controller is defined in HTML
I use this code and work well.
var $scope = angular.element($('[ng-controller="MapCtrl"]')).scope();
and thanks to @Ivan-San answers.
You can put Jquery code into AngularJS controller like
$scope.shipchange = function (SelectedShipId ) {
alert('ShipId =' + SelectedShipId );
$("#Ships").change(function () {
SelectedShipId = $("#Ships").val();
$scope.shipchange(SelectedShipId );
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
