I am getting a infinite digest cycle error with the filter code below. What is incorrect with it. I do not see an issue with this. Is there a different method of assignation or is it a known bug? I am not sure whats happening here with this error
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="UTF-8">
<title>Directives</title>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<h1>Test Text for style</h1>
<div ng-controller="firstCtrl">
<input type="text" ng-model="search">
<div ng-repeat="var in variable | filtername:'test':'test2':'test3' track by $index">
{{var}}
</div>
</div>
<script>
var app = angular.module("demo",[]);
app.filter("filtername",function(){
return function(array, arrayField, arrayField1, arrayField2){
/* modification here */
var myArr = [];
for(var i=0;i<array.length;i++){
if((array[i].name===arrayField) || (array[i].name===arrayField1) ||(array[i].name===arrayField2)){
myArr.push({name: angular.uppercase(array[i].name)});
}
}
return myArr;
}
})
app.controller("firstCtrl",function($scope){
$scope.variable = [
{name:"test"},
{name:"test2"},
{name:"test3"},
{name:"test4"}];
})
</script>
</body>
</html>
Related
Can anyone please explain why console.log suddenly stopped to work? I'm trying to debug an exercise for an Angularjs class and at a certain point, console.log was not printing anything anymore.
I'using chrome and my cache is clear.
EDIT:
In this snippet and in Firefox console.log() works but in Chrome does not. How come?
(function () {
'use strict';
angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);
Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
var nrdown = this;
var promise = MenuCategoriesService.getMatchedMenuItems();
}
MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
var service = this;
console.log("start");
service.getMatchedMenuItems = function(searchTerm){
return $http({
method : 'GET',
url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
}).then(function(result){
var foundname = [];
angular.forEach(result.data.menu_items, function(value, key){
var name = value.name;
//console.log(typeof name);
if (name.toLowerCase().indexOf("chicken") !== -1){
foundname.push(name);
};
});
console.log("end");
return foundname;
});
}
}
})();
<!doctype html>
<html lang="en" ng-app='Ass3'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
<script type="text/javascript" src="app.js"></script>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="container" ng-controller="NarrowItDownController as nrdown">
<h1>Narrow Down</h1>
<div class="form-group">
<input type="text" placeholder="search term" class="form-control">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary">Narrow It Down For Me!</button>
</div>
<!-- found-items should be implemented as a component -->
<found-items found-items="...." on-remove="...."></found-items>
<ul>
<li ng-repeat="category in nrdown.categories">
{{categroy.name}}
</li>
</ul>
</div>
</body>
</html>
You have log placed after return statement
return foundname;
console.log("end");
Just swap this lines like so
console.log("end");
return foundname;
return foundname; should be below console.log()
(function () {
'use strict';
angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);
Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
var nrdown = this;
debugger
var promise = MenuCategoriesService.getMatchedMenuItems();
}
MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
var service = this;
console.log("start");
service.getMatchedMenuItems = function(searchTerm){
return $http({
method : 'GET',
url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
}).then(function(result){
var foundname = [];
angular.forEach(result.data.menu_items, function(value, key){
var name = value.name;
//console.log(typeof name);
if (name.toLowerCase().indexOf("chicken") !== -1){
foundname.push(name);
};
});
console.log("end");
return foundname;
});
}
}
})();
<!doctype html>
<html lang="en" ng-app='Ass3'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
<script type="text/javascript" src="app.js"></script>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="container" ng-controller="NarrowItDownController as nrdown">
<h1>Narrow Down</h1>
<div class="form-group">
<input type="text" placeholder="search term" class="form-control">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary">Narrow It Down For Me!</button>
</div>
<!-- found-items should be implemented as a component -->
<found-items found-items="...." on-remove="...."></found-items>
<ul>
<li ng-repeat="category in nrdown.categories">
{{categroy.name}}
</li>
</ul>
</div>
</body>
</html>
How could I add a space/special character after the "₹".
Expected output:₹ 49
Current output:₹49
HTML - {{cart.getTotalPrice() | currency:"₹"}}
You cannot achieve with the currency filter. just use the number filter.
<div ng-controller="MyCtrl">
<input class="tb" ng-model="numberInput" type="text" /> {{ "₹ "+(numberInput | number:2) }}
</div>
DEMO
var app = angular.module("app", []);
app.controller('AddSiteURLCntr', function($scope, $sce) {
$scope.numberInput = '1275.23';
})
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="AddSiteURLCntr">
<input class="tb" ng-model="numberInput" type="text" /> {{ "₹ "+(numberInput | number:2) }}
</div>
</body>
</html>
You can try this
View
<span ng-bind="getCurrency(cart.getTotalPrice())"></span>
<span ng-bind="getElem(cart.getTotalPrice())"></span>
Controller
$scope.getCurrency = function (item) {
return ($filter('currency')(item,'₹')).substring(0,1);
}
$scope.getElem = function (item) {
return ($filter('currency')(item,'₹')).substring(1,item.length);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="my-controller">
<input type="number" name="price" ng-model="totalPrice">
<p>{{getTotalPrice() | currency : "₹ "}}</p>
</div>
<script type="text/javascript">
var app = angular.module("my-app",[]);
app.controller("my-controller",function($scope){
$scope.totalPrice = 0;
$scope.getTotalPrice = function(){
return $scope.totalPrice;
}
});
</script>
</body>
</html>
Just put a space after symbol, like this
HTML - {{cart.getTotalPrice() | currency:"₹ "}}
and you will get your desired output...
You can extend the currency filter creating your own filter...
angular.module('yourModuleName').filter('money', filter);
function filter($filter, $locale) {
const formats = $locale.NUMBER_FORMATS;
return function(amount, currencySymbol) {
if (!currencySymbol) currencySymbol = formats.CURRENCY_SYM + ' ';
return $filter('currency')(amount, currencySymbol);
};
}
Now, you can apply your new filter called 'money'...
<span>{{vm.contractedPrice | money}}</span>
Ive been trying for the past couple of hours but for I can't seem to figure out why I can access $scope.FeatureGroup to add to my url
Any ideas?
angular.module('ngRepeat', ['ngAnimate',]).controller('repeatController', function($scope, $http) {
$scope;
$scope.FeatureGroup = 50000;
$scope.ShowMeData = function($scope){
var url = 'URLHERE' + $scope.FeatureGroup;
$http.get(url).success(function(data) {
console.log(data);
//$scope.Object = data;
});
}
});
<html lang="en"><head>
<meta charset="UTF-8">
<title>Example - example-ng-repeat-production</title>
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngRepeat">
<div ng-controller="repeatController">
There are Features - Please click them to see the page:
<br><input type="number" ng-model="FeatureGroup" ng-value="10" ng-keyup="ShowMeData()">
<br><input type="search" ng-model="q" placeholder="filter Features..." aria-label="filter friends">
<ul class="example-animate-container">
{{FeatureGroup}}
<!-- ngIf: Objects.length === 0 -->
<!-- ngRepeat: feature in Object | filter:q as results -->
</ul>
</div>
</body>
</html>
That is because of following line. You are overriding the $scope variable:
$scope.ShowMeData = function($scope){
You are really not passing any scope variable while calling the function
ng-keyup="ShowMeData()".
Just change it to:
$scope.ShowMeData = function(){
and it should work.
so I have this code which displays data from elastic search, the purpose is to get some data, compute a average and display a red or green button.
I'm just starting.
<!doctype html>
<html ng-app="EsConnector">
<link rel="stylesheet" href="styles/main.css">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script><!-- // a recuperer -->
<script src="scripts/controllers/elasticsearch.angular.js"></script>
<script src="scripts/controllers/es_connect.js"></script>
</head>
<script type="text/javascript">
function addTpsGeocodage(p1) {
alert(p1);
}
</script>
<body>
<title>Dashboard</title>
<h1 align="center">Dashboard </h1>
<hr>
<h3>Services Externes</h3>
<div ng-controller="QueryController">
<div >
<table>
<tr ng-repeat="item in hits">
<td>
{{item['_source']['tpsGecodage']}}
<script>
addTpsGeocodage(item['_source']['tpsGecodage']);
</script>
<span class="green_circle" ng-if="item['_source']['tpsGecodage'] < 1">
Lien
</span>
</td>
</tr>
</table>
</div>
</div>
<br>
Above this line ^^^ should be the results of a test search on the ElasticSearch server.
</body>
</html>
Basically this addTpsGeocodage(item['_source']['tpsGecodage']); (line 29) is doing nothing.
How can I pass a variable from the angular JS scope to the javascript scope.
Thanks
Assign the function to a variable so that it can be accessed globally.
<script type="text/javascript">
var addTpsGeocodage = function(p1) {
alert(p1);
}
</script>
Now, you can access addTpsGeocodage anywhere.
My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>