I was tried to use ng-if inside ng-repeat but it seems ng-if is not working properly.
I referred couple of forum links in StackOverflow but it doesn't help me.
I'm using angular version 1.3.0
HTML
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="/js/lib/angular-1.3.0/angular.js"></script>
<script src="/js/lib/controllers/ifRepeatController.js"></script>
</head>
<body>
<div ng-repeat = "data in comments">
<div ng-if="data.type == 'hootsslllll' ">
//differnt template with hoot data
</div>
<div ng-if="data.type == 'story' ">
//differnt template with story data
</div>
<div ng-if="data.type == 'article' ">
//differnt template with article data
</div>
</div>
</body>
</html>
Controller
var myIfRepeat = angular.module('myIfRepeat',[]);
myIfRepeat.controller('IfRepeatController', function ($scope,$http) {
$scope.comments = [
{"_id":"1",
"post_id":"1",
"user_id":"UserId1",
"type":"hoot"},
{"_id":"2",
"post_id":"2",
"user_id":"UserId2",
"type":"story"},
{"_id":"3",
"post_id":"3",
"user_id":"UserId3",
"type":"article"}
];
});
As per the first condition, the first line should not get displayed (Below find the screenshot for more reference), however the line is getting displayed.
the reference link : Using ng-if inside ng-repeat?
Now i added the controller in the div as advised, however i'm facing the same issue
Below i have given the screenshot for reference. Kindly help me how to solve this issue and please let me know in case of further clarifications.
Below provided screenshot on the working model used angular 1.3 version. If we use angular 1.0.2 the nf-if will not work properly (below provided the screenshot)
Screen shot for angular version 1.0.2
I'm not having issues with this working. Tweaked your code to fit into a fiddle
<div ng-app ng-controller="IfRepeatController">
<div ng-repeat="data in comments">
<div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//differnt template with hoot data</div>
<div ng-if="data.type == 'story' ">type={{data.type}}//differnt template with story data</div>
<div ng-if="data.type == 'article' ">type={{data.type}}//differnt template with article data</div>
</div>
</div>
function IfRepeatController($scope) {
$scope.comments = [{
"_id": "1",
"post_id": "1",
"user_id": "UserId1",
"type": "hoot"
}, {
"_id": "2",
"post_id": "2",
"user_id": "UserId2",
"type": "story"
}, {
"_id": "3",
"post_id": "3",
"user_id": "UserId3",
"type": "article"
}];
}
Note: reference angular 1.3.0 here: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js
You are missing ng-controller:
<body ng-controller="IfRepeatController">
I have a similar issue. I cannot get ng-if to work correctly. The only way to get it to work is to evaluate the ng-if to the not operator (ng-if="!variableValue"). Is this an AngularJS version issue?
This in not AngularJs Version issue, If variableValue has boolean it will work fine.
Sample code like this:
$scope.variableValue = true; in Controller
"<"div ng-if="!variableValue" ">"Don't show content"<"/div">"// This DIV doesn't show the content
"<"div ng-if="variableValue" ">"show content"<"/div">" // This DIV will show the content
Related
This is a simple html code and it is working fine. Now I have an AngularJS array and I can access and bind variables like $scope.ID or $scope.text which is working fine. But how can I bind values, to $scope.articles array. with relevant values.
For example
If i change the value of f0, (just example it is not working) $scope.articles.[0].betrag_gnetto value should change
If i change the value of f1, (just example it is not working) $scope.articles.[1].betrag_netto value should change
HTML Code (I have created these field through ng-repear loop)
<input type="text" ng-model="betrag_netto0" id="f0">
<input type="text" ng-model="betrag_netto1" id="f1">
<span ng-bind="betrag_netto0"></span>
<span ng-bind="betrag_netto1"></span>
AngularJS Array looks like
{
"isInternalInvoice":1,
"name":"Rechnung",
"ID":"5cd45e86",
"text":null,
"countArticles":2,
"articles":[
{
"ID":"130.123",
"betrag_netto":"123987"
},
{
"ID":"131.123",
"betrag_netto":"1"
}
]
}
Create input fields corresponding to the objects present in the articles array using ng-repeat and this will make it two way binding.
var app = angular.module('plunker', []);
app.controller('ApplicationController', function($scope) {
$scope.obj = {
"isInternalInvoice": 1,
"name": "Rechnung",
"ID": "5cd45e86",
"text": null,
"countArticles": 2,
"articles": [{
"ID": "130.123",
"betrag_netto": "123987"
}, {
"ID": "131.123",
"betrag_netto": "1"
}]
};
});
<!doctype html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>
<body>
<div class="container" ng-controller="ApplicationController">
<div class="row" ng-repeat="article in obj.articles">
<input type="text" ng-model="article.betrag_netto" id="f{{$index}}"> <span ng-bind="article.betrag_netto"></span> </div>
</div>
</body>
</html>
try $scope.articles[0].betrag_gnetto
It works
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'm new to Angular and I'm trying to set up a simple display. I've looked through the documentation on ng-repeat and have done some of the tutorials with success every time. However, when I went to do a mock of my own I can't get anything to show from the JSON file. Even using the often found Angular "todo.json" example found everywhere I still am unable to figure this one out. I'm not sure if it has to do something with JSON or possibly nesting the ng-repeat. Can anyone guide me to seeing the light?! hehe. Thanks in advance.
So, here's the Plunker link. http://plnkr.co/edit/8rNgPHUHEe88Gpw6aM1D
HTML:
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="Calendar">
<ul>
<li ng-repeat="items in events">
{{items.events}}
</li>
</ul>
</body>
</html>
JS:
var App = angular.module('App', []);
App.controller('Calendar', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.events = res.data;
});
});
JSON:
[
{
"events": [
{
"EventTitle": {
"href": "http://example.com/event1",
"text": "HEADLINE TEXT FOR EVENT 1"
},
"HeadlineImage": {
"href": "http://example.com/event1",
"src": "http://example.com/Image.jpg",
"text": "CAPTION TEXT FOR IMAGE "
},
"Eventdescription": "Lorem Loreem Loreeem Ipsum Ipsuum Ipsuuum ..."
}
]
}
]
Your data structure is pretty weird. Check an updated working plunker: http://plnkr.co/edit/SXHjqxjZ2bgJSs327jz4?p=preview
You can use <pre>{{ events | json }}</pre> in your view to easily inspect/debug objects.
If you must keep this structure, then you need to do something like this
<ul>
<li ng-repeat="items in events">
{{items.EventTitle.text}}</>
</li>
</ul>
controller:
App.controller('Calendar', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.events = res.data[0].events;
});
});
Here's a forked plunker
Edit:
The revised plunker, using the above changes. The scope var should be res.data.events
Updating after a new json structure provided:
Here's a working example with actual json data
I'm a newbie with AngularJS. I used it yesterday for the first time (loving it!), so I apology if this is a dumb question.
I'm looping through a set of data called "leagues" mapping my HTML template with no issues. The data for the 3 leagues, including the logo appears correctly, however, the browser console keeps telling me the 3 logos doesn't exist (like the mapping hasn't taken place yet...)
Any ideas why is this happening? Thanks in advance!
Error:
HTML:
<!doctype html>
<html ng-app id="ng-app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="choose-league" class="section row">
<div ng-repeat="league in leagues">
<div class="col-md-4 league" ng-click="getTeams(league.abbr)">
<img id="{{league.id}}" src="{{league.logo}}" alt="{{league.id}}">
</div>
</div>
</div>
</body>
</html>
JavaScript (AngularJS):
function dataController ($scope) {
// Set of leagues we want data from
$scope.leagues = [
{id: 'champions', abbr: 'uefa.champions', logo: '/img/champions-logo.png'},
{id: 'liga', abbr: 'esp.1', logo: '/img/liga-logo.png'},
{id: 'premier', abbr: 'eng.1', logo: '/img/premier-logo.png'}
];
}
You should use the ng-src directive instead of the src attribute on your images. The purpose of this directive is addressing precisely the issue you're experiencing.
[EDIT]
As per the question WHY this is happening, the HTML is parsed verbatim (with the curly brackets) before angular.js kicks in and does its magic, making the browser complain about an invalid image url under the src attribute.
I'm trying to ng-repeat over 'cols' as a starting point. But I'm getting an error when trying to consume this JSON
{
"cols":["id","name","type"],
"rows":[
["284","JAMES DEAN","Employee"],
["243","Brian J Adamms","Employee"],
["237","Test Account","Brokerage Account"],
["241","Robert Borkman","guest"]
]
}
The error appears to be in the angularJS file, but Im sure the problem is elsewhere.
Error: a.push is not a function
W#http://127.0.0.1/js/lib/angular.min.js:10
g#http://127.0.0.1/js/lib/angular-resource.min.js:7
u/</g[b]/</<#http://127.0.0.1/js/lib/angular-resource.min.js:8
o#http://127.0.0.1/js/lib/angular.min.js:7
u/</g[b]/<#http://127.0.0.1/js/lib/angular-resource.min.js:8
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/e/g.promise.then/i#http://127.0.0.1/js/lib/angular.min.js:79
Rc/f/<.then/<#http://127.0.0.1/js/lib/angular.min.js:79
e.prototype.$eval#http://127.0.0.1/js/lib/angular.min.js:91
e.prototype.$digest#http://127.0.0.1/js/lib/angular.min.js:89
e.prototype.$apply#http://127.0.0.1/js/lib/angular.min.js:91
f#http://127.0.0.1/js/lib/angular.min.js:100
B#http://127.0.0.1/js/lib/angular.min.js:103
ad/</p.onreadystatechange#http://127.0.0.1/js/lib/angular.min.js:105
Here is a "plunker" example - run console - you'll see the same error I'm getting - and the JSON shows as an empty array.
http://plnkr.co/edit/QgNkvsOIVzrpUp5pP02p?p=preview
Thank you all for help
I don't think the error is in angular source, and it will handle that JSON just fine: http://plnkr.co/edit/knJQ0S?p=preview
Im able to get what problem you are facing see the below code
<html ng-app="myapp" >
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="Scripts/Angular.js"></script>
</head>
<body >
<div ng-controller="TestCtrl" >
<div ng-repeat="data in data.cols">
{{data}}
</div>
</div>
<script>
var myapp = angular.module('myapp', []);
function TestCtrl($scope, $http,$timeout) {
$scope.data = {
"cols": ["id", "name", "type"],
"rows": [
["284", "JAMES DEAN", "Employee"],
["243", "Brian J Adamms", "Employee"],
["237", "Test Account", "Brokerage Account"],
["241", "Robert Borkman", "guest"]
]
};
}
</script>
</body>
</html>