I am currently working on a task in my AngularJS project. The requirement is that when both point directives within the md-autocomplete code are filled, the results directive should be displayed immediately without the need for any button. Additionally, if I press the cross icon to clear one of the autocomplete fields, the block should hide automatically.
Unfortunately, my code is not functioning as expected
Please note and look for any errors in the browser console section.
var app = angular.module('app', ['ngMaterial']);
app.controller('mainCtrl', function($scope){
$scope.interim = false;
$scope.go = function(){
$scope.interim = true;
};
});
app.directive('point', function(){
return {
restrict: 'AE',
template: '<div layout layout-sm="column">' +
'<md-autocomplete ng-disabled="isDisabled" md-no-cache="noCache" md-selected-item="selectedItem" md-search-text-change="searchTextChange(searchText)" md-search-text="searchText" md-selected-item-change="selectedItemChange(item)" md-items="item in querySearch(searchText)" md-item-text="item.display" md-min-length="0" placeholder="{{place}}">' +
'<md-item-template>' +
'<span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>' +
'</md-item-template>' +
'</md-autocomplete>' +
'</div>',
controller: PointCtrl,
scope: {
place: '@',
go: '&'
}
}
});
function PointCtrl($scope, $rootScope, $timeout, $q, $log) {
$scope.simulateQuery = false;
$scope.isDisabled = false;
$scope.cities = loadAll();
$scope.querySearch = querySearch;
$scope.selectedItemChange = selectedItemChange;
function loadAll() {
var allCities = 'London, Manchester, Liverpool, Paris, Lion, Prague, New York, Dallas';
return allCities.split(/, +/g).map(function (city) {
return {
value: city.toLowerCase(),
display: city
};
});
}
function querySearch(query) {
var results = query ? $scope.cities.filter(createFilterFor(query)) : $scope.cities,
deferred;
if ($scope.simulateQuery) {
deferred = $q.defer();
$timeout(function () {
deferred.resolve(results);
}, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(city) {
return (city.value.indexOf(lowercaseQuery) === 0);
};
}
function selectedItemChange(item) {
$log.log('value: ' + item.display);
$scope.chosenPoint = item.display;
$scope.$watch('chosenPoint', function (newVal, oldVal) {
if (newVal !== '') { //if autocomplete field is completed
$scope.go(); //show block with results directive
} else {
//$scope.hideBlock(); //if not or cleared - hide block
}
});
}
}
app.directive('results', function() {
return {
restrict: 'AE',
template: '<div style="width: 400px; height: 200px; background-color: red; font-size: 30px; text-align: center" ng-show="interim">I need to show this block when autocomplete fields are filled and hide it when both or, at least, one of the fields are cleared, pressing a cross</div>'
}
});<html ng-app="app">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<style>
.resultsBlock {
width: 400px;
height: 400px;
font-size: 14px;
}
h3 {
margin: 20px 0;
}
md-autocomplete button{
position: relative;
left: 100px;
line-height: 20px;
}
md-autocomplete input:not(.md-input) {
font-size: 14px;
width: 40%;
}
</style>
</head>
<body ng-controller="mainCtrl">
<div class="resultsBlock" layout="column">
<point place="point_1"></point>
<h3>Block of text will be shown when both autocomplete fields will be completed</h3>
<results></results>
<point place="point_2" go="go()"></point>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<script src="main.js"></script>
</body>
</html>