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
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
