该应用的目的是比较两个文本框中的两个值,如果它们相同则不添加到列表中:
这是我的nodeexpress app中的EJS文件:
<input autofocus type="text" name="result1" class="form-control" id="result1" placeholder="Enter Airport Code or City Name" ng-autocomplete="result1" details="details1" options="options1" ng-model="result1">
<input type="text" name="result2" class="form-control" id="result2" placeholder="Enter Airport Code or City Name" ng-autocomplete="result2" details="details2" options="options2" ng-model="result2">
<div class="alert alert-danger" ng-show="invalid">
<strong>Source and Destination can not be same</strong>
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="addItem()">Add to Itinerary</button>
</div>
<ul>
<li ng-repeat="x in products | reverse">{{x}}</li>
</ul>
<div class="col-lg-4">
<ul>
<li ng-repeat="y in products2 | reverse">{{y}}</li>
public / angularjs / validate.js文件
angular.module( "myApp", ['ngAutocomplete']).controller("myController",function ($scope, $http) {
$scope.result1 = '';
$scope.options1 = null;
$scope.details1 = '';
$scope.result2 = '';
$scope.options2 = null;
$scope.details2 = '';
$scope.products = [];
$scope.products2 = [];
$scope.valid = false;
$scope.invalid = true;
$scope.addItem = function () {
$http({
method : "POST",
URL : '/validate',
data : {
"result1" : $scope.result1,
"result2" : $scope.result2
}
}).success(function(data){
//checking the response data
if(data.statusCode == 401){
$scope.invalid = false;
$scope.valid = true;
$scope.products.push($scope.result1);
$scope.products2.push($scope.result2);
}else{
$scope.invalid = true;
$scope.valid = false;
}
}).error(function(error){
$scope.valid = true;
$scope.invalid = true;
});
}
});
angular.module( "myApp").filter('reverse', function() {
return function(items) {
return items.slice().reverse();
};
});
angular.module( "ngAutocomplete", []).directive('ngAutocomplete', function($parse) {
return {
scope: {
details: '=',
ngAutocomplete: '=',
options: '='
},
link: function(scope, element, attrs, model) {
var opts
var initOpts = function() {
opts = {}
if (scope.options) {
if (scope.options.types) {
opts.types = []
opts.types.push(scope.options.types)
}
if (scope.options.bounds) {
opts.bounds = scope.options.bounds
}
if (scope.options.country) {
opts.componentRestrictions = {
country: scope.options.country
}
}
}
}
initOpts()
var newAutocomplete = function() {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
scope.ngAutocomplete = element.val();
});
})
}
newAutocomplete()
}
};
});
路由/ validate.js
exports.execute = function(req, res){
var result1 = req.param("result1");
var result2 = req.param("result2");
var json_responses;
if( result1 === result2 ){
json_responses = {"statusCode" : 200};
res.send(json_responses)
}else
{
json_responses = {"statusCode" : 401};
res.send(json_responses);
}
};
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var validate = require('./routes/validate');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.post('/validate', validate.execute);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;