Seeking clarification as to what I am missing from my AngularJS (1.5.6) code. The current source code I'm working with does the following:
- Defines
var modeljson - Calls
init() - Runs
init()which retrieves local storage and returns a query.
The following is an excerpt of the source code. Currently it is not working. The code intentions are to highlight the search box when it is not empty. Note: queryFoo is mockup i.e. a placeholder.
AngularJS
(function() {
angular
.module("myApp")
.controller("fooController", fooController);
function fooController() {
var model = this;
model.queryFoo = queryFoo;
model.search = "";
//model.styleSearch = 'search-empty';
model.highlightActiveSearch = highlightActiveSearch;
init();
function init() {
return queryFoo();
}
function highlightActiveSearch() {
model.styleSearch = model.search.length >= 1
? "search-active"
: "search-empty";
}
}
})();
CSS
.search-active {
background-color: green;
color: white;
}
HTML
<div ng-app="myApp" ng-controller="fooController as fc">
<input class="form-control input-sm valign" type="search" placeholder="Search" ng-model="fc.search" ng-change="fc.highlightActiveSearch()" ng-class="fc.styleSearch" />
</div>