I am trying to load some content using ng-repeat with Angular.js. I set up a controller which will create an array, and corresponding HTML uses ng-repeat to display all elements in the array.
HTML:
<div class="list-group" ng-controller="MainController as ctrl">
<p class="list-group-item cat" ng-repeat="element in ctrl.current_articles">{{ element }}</p>
</div>
JS:
angular.module('newsclassifier', [])
.controller('MainController', ['$http', function($http){
var self = this;
self.current_articles = [1,2,3,4,5];
}]);
Now on running this code, I am able to see that rows for 5 elements are being created in the corresponding div. However, no content is displayed.
I tried using even the $scope syntax, but to no difference. I am running version 1.4.8 of Angular.js.
Is there something amiss here?
There is a typo in your markup.
ng-controller="ctrl as MainController"
should be
ng-controller="MainController as ctrl"
Related
I have posted my question
How to create check box from multidimensional array using angular js
But I have not gotten any response. I have debug my code when I am going to add second ng-repeat I am getting
Error: ngRepeat:dupes Duplicate Key in Repeater
When I am adding repeat by $index I am getting single character as key and value too
Please help me I am new in angular js :(
This is my fiddle of code http://jsfiddle.net/ashishoft/03L3faq5/2/
Here is example:
ng-repeat="i in items track by $index"
Pretty simple really. You can even use it in combination with custom directives etc. Its basically an index of where you are in the loop.
There are some flaws with using it though. If your creating an ng-repeat list, and then passing the $index into some click function or something, then you can have issues if your also using filtering on that same list. The $index can fall out of sync with the filters and leave you wondering why its giving you wrong data.
for example:
<li ng-repeat="page in links | someFilter:filter">
<a ng-click="someFunction($index)">{{ someData }}</a>
</li>
vs the better way of:
<li ng-repeat="itemX in someData | someFilter:filter">
<a ng-click="someFunction(itemX)">{{ itemX.name }}</a>
</li>
So although I use the $index in my example below, its often best just to pass the whole object in when doing more complex functions per row.
HTML:
<div ng-app="myApp" ng-controller="MainCtrl">
<ul>
<li ng-repeat="page in links">
<a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }}</a>
</li>
</ul>
</div>
Javascript:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.links = [
'Link One',
'Link Two',
'Link Three'
];
$scope.pageNumber = 0;
$scope.setPageNumber = function(index) {
$scope.pageNumber = index;
}
});
CSS:
.testClass {
background: black;
color: white;
}
This is a sample of how it could be written, although using $index is just fine. Might I suggest using something else like the element id or title, here is an article that talks about ng-repeat.
<div class="favorite-children" ng-repeat="photo in ctrl.favorties track by $index">
<div class="card"></div>
</div>
//or
<div class="favorite-children" ng-repeat="photo in ctrl.favorties track by photo.title">
<div class="card"></div>
</div>
Update
Try this FIDDLE for a preview of a comprehensive JSON, with your same code previewed on how you can use it. Hope it helps.
I'm going nuts, this is such a small thing but I can't find a solution...
I have this js file (the angularjs app is initialized in the begining of the html document)
app.controller('slidingMenuCtrl', function($scope) {
$scope.categories = [
{title: 'Festas', icon: 'ion-ios-pint', notifications: 3},
{title: 'Palestras', icon: 'fa-microphone', notifications: 0}
];
$scope.test = 'aaa';
});
and somewhere in my html
<ons-template id="menu.html" ng-controller="slidingMenuCtrl">
<ons-page>
<div ng-repeat="x in categories">
{{x.title}}
</div>
<div>
{{test}}
</div>
</ons-page>
</ons-template>
The div with ng-repeat shows nothing, but the one without it shows 'aaa' correctly, why?
ons-template template doesn't support ng-controller directive, basically it needs an idea to process a template and thereafter a processing if we ask for template over http it returns registered ons-template with that id, here you had menu.html
You could do same thing as that by having script tag with type text/ons-template there. Its just same as type/ng-template in angular.
Template
<script type="text/ons-template" id="main.html">
...content here...
</script>
Add ng-controller over ons-page will make it working by instantiating controller specified ng-controller directive.
Code
<ons-page ng-controller="slidingMenuCtrl">
<div ng-repeat="x in categories">
{{x.title}}
</div>
<div>
{{test}}
</div>
</ons-page>
I have an angularJS service that reads data from a json file and returns me an object with a few SVG image file names.
I have a ng-repeat on the return object to look and display all the SVG files on the page.
Here is my ng-repeat on my template
<div ng-repeat="items in libCtrl.categories track by $index">
<div ng-include="img/library/items.categoryImage"></div>
</div>
This code does not display any SVG image file on the page.
But if I hardcode the value of the file names on the ng-include it works.
<div ng-repeat="items in libCtrl.categories track by $index">
<div ng-include="'img/library/myfile.svg'"></div>
</div>
How can I get it to work using the data from my items.categoryImage?
Check working demo: Plunker.
Use <div ng-include="'img/library/' + items.categoryImage"></div>
I'm using AngularJS and compiling a directive into my main page. The directive has a set of buttons that change depending on what is happening in the directive.
I would like to move the buttons to something like a menu-bar in my page, but the menu-bar is not part of the directive.
Would it be possible to use something like ng-include to insert the buttons in the menu-bar?
An example of what I would like to do:
<body ng-app="myApp" ng-controller="Controller">
<nav class="navbar">
<ul class="nav nav-pills">
<li>
<button>A permanent button</button>
</li>
<div ng-include="#other-buttons></div>
</ul>
</nav>
<my-directive></my-directive>
<script type="text/javascript">
angular.module('myApp', [])
.controller('Controller', ['$scope', function($scope) {
$scope.data = someData;
}])
.directive('myDirective', function() {
return {
template: '<div id="other-buttons" ng-switch="data">
<div ng-switch-when="this">
<li><button>This button</a></li>
</div>
<div data-ng-switch-when="that">
<li><button>That button</a></li>
</div>
</div>'
};
});
</script
</body
So depending on some data the directive template will be different, which should change the content in the nav-bar. How would doing that work?
You can use $templateCache to set and get templates, and then reference them by the ids you gave them. You can see the examples on the page.
myApp.run(function($templateCache) {
$templateCache.put('buttons.html',
'<div id="other-buttons" ng-switch="data">
<div ng-switch-when="this">
<li><button>This button</a></li>
</div>
<div data-ng-switch-when="that">
<li><button>That button</a></li>
</div>
</div>'
);
});
and then load to the ng-include with
<div ng-include=" 'buttons.html' "></div>
Considering that your directive and controller share the same scope, and that your navbar falls within your controller, they should act the same.
However, if you were to use this setup in different parts of the application that do not share the same scope, I would suggest you set up a service that will bridge the gap between the two.
I had this code on index.html:
<div class="container-fluid people-container">
<div class="search">
<!--Sidebar content-->
<span class="search-text">Search:</span>
<input ng-model="query" class="search-input">
<span class="sort-text">Sort:</span>
<select ng-model="orderProp" class="sort-select">
<option value="name">Alphabetical</option>
<option value="age">Date</option>
</select>
</div>
<div class="people-listing">
<!--Body content-->
<ul class="people">
<li ng-repeat="person in people | filter:query | orderBy:orderProp" class="thumbnail person-listing clearfix">
<a class="clearfix" href="#/people/{{person.id}}">
<img class="thumb" ng-src="{{person.imageUrl}}">
<div class="person-info">
<h1 class="title">{{person.name}}</h1>
<span class="year">{{person.born}} - {{person.died}}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
I decided to divide the UI into partials, and moved the search part to search.html:
<div class="search">
<!--Sidebar content-->
<span class="search-text">Kërko:</span>
<input ng-model="query" class="search-input">
<span class="sort-text">Radhit sipas:</span>
<select ng-model="orderProp" class="sort-select">
<option value="name">Alfabetit</option>
<option value="age">Vitit</option>
</select>
</div>
Before doing this, the search form was working great. After I moved it to another template, it doesn't work. I have no idea because this is my first day working with Angular.js, and I'd need some help. Also, here's what on my controllers.js:
var deshmoretControllers = angular.module('deshmoretControllers', []);
deshmoretControllers.controller('PeopleListCtrl', ['$scope', 'Person',
function($scope, Person) {
$scope.people = Person.query();
$scope.orderProp = 'age';
}]);
...
Plunker:
http://plnkr.co/edit/J98O34dBFaUchhKdT6ck
i fixed the code.. there were lots of issues in it.. WORKING PLUNKER LINK
1. you need ng-controller which covers both search & results, you kept the controller on just each box & not on list
2. make sure that you ng-model never uses value without dot, rather than query - use variable as search.query
2b. make sure to initialize the search object in controller $scope.mysearch = {};
I did below modification
moved controller to list.html rather than search.html
init $scope.mysearch = {} in controller
We this is a prototypal inheritance problem.
Assuming you are moving the template and referencing it with ng-include. ng-include creates a new scope.
You set your query in the new scope, not in the parent scope that is part of PeopleListCtrl
To fix it define the query as object on the parent scope
$scope.query={term:''}
Then reference this as query in partial search.html
<input ng-model="query.term" class="search-input">
In this way the child scope can manipulate the object properties defined on parent.
As long as the parent child relationship is there you can now access the update query data in the parent scope.
Also the declaration of ng-controller=PeopleListCtrl should be on the parent element of where the search.html is inserted if used. If the controller is injected using $route definition then nothing needs to change.
Since the query has changed to object all reference should be to now query.term like
ng-repeat="person in people | filter:query.term | orderBy:orderProp"
To know more about prototypal inheritance and scopes see this wiki https://github.com/angular/angular.js/wiki/Understanding-Scopes