Currently new & working on a web app using AngularJS, using Nginx serv.
I want to select some precise values to put them in a html table.
I kept searching and never find an adequate solution.
Do you have an idea on how can I make this work?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('variables.json').success(function(data) {
$scope.variables = data;
});
});
</script>
<link rel="stylesheet" type="text/css" href="../app/css/style.css">
</head>
<body ng-app="app" ng-controller="myCtrl" ng-init="variables">
<ul>
<li ng-repeat="var in variables">
{{var.b}}
{{var.a}}
</li>
</ul>
</body>
</html>
JSON File:
{
"a":6084.0,
"b":979
}
I just put an example of the JSON file. My purpose is to display for example just the b or a value.
You can read as (key,value) in $variables and display value.
<ul>
<li ng-repeat="(key,value) in variables">
{{key}}:{{value}}
</li>
</ul>
Demo link
https://plnkr.co/edit/nTUOvyMHcDRdtSzyecLw?p=preview
ng-repeat only works if the data in your json will be Array Since the data is the Object it will not find any element so it won't showing values .
change the Json as below:
[{
"a":6084.0,
"b":979
}]
The directive ngRepeat works with objects if the following syntax is used:
<div ng-repeat="(key, value) in myObj"> ... </div>
Related
I’ve been having a problem with a scope property in my controller – a simple test title and an array of strings used with ng repeat. They are not being displayed on the screen when served up from our rather complex server. Note that with ng repeat it seems to know the size of the array, just doesn’t display it, see first example below.
They are being displayed correctly when served up from apps like codepen or plunker. It also works when I run it on localhost using a simple server. See working version in 2nd example below.
I know responders will protest that they cannot help without more specific information about our server - but I'm guess I'm asking specifically:
Have you seen a case where ng repeat seems to know the size of the array, but just doesn’t display the items in the array - if so what caused it?
What types of issues with our server do you think could cause this? What should I be looking for..
Non working example from our server
Working example from codepen or simple server on localhost
var app = angular.module('testApp', []);
angular.module('testApp').controller('AuthorizePageCtrl', ['$scope', function ($scope) {
'use strict';
$scope.mytesttitle = "this is a test";
$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);
<!DOCTYPE html>
<html data-ng-app="testApp">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="/js/controllers/AuthorizePageCtrl.js"></script>
</head>
<body>
<div id="consent" ng-app="testApp">
<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>
<div>
<ul>
<li ng-repeat="myitem in myitems">"myitem in myitems should appear->"{{myitem}}</li>
</ul>
</div>
<div ng-repeat="myitem in myitems">
<h2>"myitem in myitems should appear->"{{myitem}}</h2>
</div>
</div>
</div>
</body>
</html>
so first data-ng-app and ng-app they are the same. and you only need one. and for the JS i may this changes and it works for me.
Angular part:
var app = angular.module('app', []);
app.controller('AuthorizePageCtrl', ['$scope', function ($scope) {
$scope.mytesttitle = "this is a test";
$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);
HTML part:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="//code.angularjs.org/1.6.6/angular.js" ></script>
<script src="app.js" ></script>
</head>
<body>
<div id="consent" >
<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>
<div>
<ul>
<li ng-repeat="myitem in myitems">"myitem in myitems
should appear->"{{myitem}}</li>
</ul>
</div>
<div ng-repeat="myitem in myitems">
<h2>"myitem in myitems should appear->"{{myitem}}</h2>
</div>
</div>
</div>
</body>
</html>`enter code here`
So it turns out web site uses swig which conflicts with angularjs.
It uses swig for template var which was conflicting with angularjs' use of {{}}, preventing this very simple example from working. Thanks for responses ....
See this other fix for swig/angular conflict if you don't want to use ng-bind
I have created an application in rails , i have written small angular example , I have written in partial file and rendered it. But nothing is loading. Will angular work in partials? my code is
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
<p>So far we have made an HTML list based on the items of an array.</p>
</body>
</html>
And the output is
{{x}}
So far we have made an HTML list based on the items of an array.
And i am not getting any error in console or firebug
Can anybody suggest solution
How to find array size in AngularJS
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name}}
</li>
</ul>
</div>
$scope.names = [
{name:'Jani'} ,
{name:'raaj'}
];
});
</script>
</body>
</html>
here i need size of names array
Just use the length property of a JavaScript array like so:
$scope.names.length
Also, I don't see a starting <script> tag in your code.
If you want the length inside your view, do it like so:
{{ names.length }}
You can find the number of members in a Javascript array by using its length property:
var number = $scope.names.length;
Docs - Array.prototype.length
I am new to angular.js and I was trying my hands on it. Can anyone please tell me why this program is not running?
HTML code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link data-require="bootstrap#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script data-require="jquery#>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="cust in customers | filter:name"></li>
</ul>
</div>
</body>
</html>
JS code:
// Code goes here
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'xx xx' city:'xx'},
{name:'yy yy' city:'yy'},
{name:'zz zz' city:'zz'}
];
}
demoApp.controller('SimpleController', SimpleController);
You have several errors in you sample:
The main problem is that you're using the Angular 1.x.x syntax while you have the Angular 2.x.x script included in your app. Change the script for the previous release of the framework.
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" data-semver="1.4.8"></script>
The customers object is not a valid JSON as separation commas between properties are missing. It should look like this:
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
You don't show anything using ng-repeat directive, you simply create several empty <li> tags, hence there's no content inside them. You need to display the variable that you iterate. If you want to show only the name property of the object, use simple dot syntax.
<li ng-repeat="cust in customers">{{cust.name}}</li>
Your input filed has ng-model attached, but you don't use the variable that is bound to it. You can refer to the variable with {{name}}.
Name: {{name}}<br/>
<input type="text" ng-model="name"/>
To see the big picture, here's the fixed sample.
Please refer to below code
HTML
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name: <br/>
<input type="text" ng-model="name"/>
<br/>
<ul>
<li ng-repeat="cust in customers| filter:name">{{cust}}</li>
</ul>
</div>
Angular
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
}
demoApp.controller('SimpleController', SimpleController);
Please refer
Problem
$scope.customers is not a valid object(missing commas between properties).
You have not displayed anything inside ng-repeat. Please use {{cust}}. Please refer ng-repeat.
The scripts inside your plunker are wrong.
Here is the fiddle demo.
js
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
html
<li ng-repeat="cust in customers | filter:name">
{{ cust.name }}
</li>
hope this will help you
I have an array of objects ObjectsArr= [Object1 , Object2,Object3, Object4]
I want to show in my view the last object, how to do that in angularjs?
ObjectsArr[ObjectsArr.length - 1] -- this will give you the last element in the array.
To display it in view:
{{ObjectsArr[ObjectsArr.length - 1]}}
This will work even when the array has zero entries.
You can use ng-if directive and check if element is last by:
ng-if="$last"
please see demo below
var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function ($scope) {
$scope.data = [1,2,3]
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body >
<div ng-app="app">
<div ng-controller="homeCtrl">
<ul>
<li ng-repeat="item in data" ng-if="$last">{{item}}</li>
</ul>
</div>
</div>
</body>
</html>
For working with Arrays I recommend Lodash or Underscore.
It will save you a lot of time in the future.
Both have last method:
_.last([1, 2, 3]); //Will return 3
See the links for API and installation.
As for viewing the result in the view, you can assign a scope variable in the relevant controller for the result and show it.
Controller:
$scope.lastItem = _.last(array);
View:
{{lastItem}}
New way in ES6 ObjectsArr.at(-1)
Check usage and compatibility on MDN/Array/at
you can use reverse!
count = [0,1,2,3]
count.reverse()
//[3,2,1,0]
count[0];
// 3