Recently, I started learning AngularJS and attempted to build a simple web page based on some tutorials. The page consists of two parts: one for user input using HTML and the other with JavaScript containing an if-else statement. However, I kept encountering an error in the console stating "[$injector:unpr]". index.html
<body ng-app="ngCribs" ng-controller="cribsController">
<div class="container">
<div class="row price-form-row" ng-if="!addListing">
<span class="input-group-addon">Min Price</span>
<select name="minPrice" id="minPrice" [ng-model]="priceInfo.min" class="form-control">
<option value="100000">$100,000</option>
<option value="200000">$200,000</option>
<option value="300000">$300,000</option>
</select>
</div>
<span class="input-group-addon">Max Price</span>
<select name="maxPrice" id="maxPrice" ng-model="priceInfo.max" class="form-control">
<option value="100000">$100,000</option>
<option value="200000">$200,000</option>
<option value="300000">$300,000</option>
</select>
<div class="container">
<div class="col-sm-4"
ng-repeat="crib in cribs | cribsFilter:priceInfo | orderBy: '-id'">
<i class="glyphicon glyphicon-tag"></i> {{crib.price | currency}} <i class="glyphicon glyphicon-home"></i> {{crib.address}}
<span class="label label-primary label-sm">{{crib.type}}</span></div>
</body>
<script src="app.js"></script>
<script src="scripts/cribsFilter.js"></script>
</html>
cribsFiler.js
angular
.module('ngCribs')
.filter('cribsFilter', function() {
return function(listings, priceInfo) {
var filtered = [];
var min = priceInfo.min;
var max = priceInfo.max;
angular.forEach(listings, function(listing) {
if(listing.price >= min && listing.price <= max) {
filtered.push(listing);
}
});
return filtered;
}
});
CribsController.js
angular
.module('ngCribs')
.controller('cribsController',function($scope, cribsFactory){
$scope.priceInfo ={
min:0,
max:1000000
}
$scope.cribs;
cribsFactory.getCribs().then(function(data){
$scope.cribs = data.data;
});
(function(error){
console.log(error);
});
});
App.js
angular.module('ngCribs',['ui.bootstrap']);