ng-repeat repeating elements but not showing content inside ng-view - javascript

I have a controller:
function ItemsController($scope, $http){
$scope.init = function(){
$scope.siteItems = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
}
};
and I have a view items.html:
<div class="row" ng-controller="ItemsController" ng-init="init()">
<div class="col-xs-6 col-md-3" ng-repeat="item in siteItems">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
when ever I load the view inside the ng-view the list gets initialised and ng-repeat produces two elements. However {{item.path}} and {{item.id}} are empty. I tried to do it with ng-src but the result was the same. I was curious if it will work with ng-bind just to see if it will bind the content and it works but its not what Im trying to do. When ever I move the content from the items.html to the main index.html view everything works. Does anybody have an idea what am I doing wrong?
EDITED:
Here is a working plunker. On my machine I wrote it like:
and I get a result of:

I landed this on this probably 2 years late, but I was using Jekyll and although it's strange that the source code look exactly the same, meaning it should work, it doesn't.
The reason being {{ }} is being reserved for Liquid template engine. To overcome this, I have found this code to re-define the syntax.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
So now I can use [[ ]] instead of {{ }} and it works out.
Source: http://www.noxidsoft.com/development/using-jekyll-and-angularjs-together/

Have you tried doing it like this:
function ItemsController($scope, $http){
$scope.items = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
};
And the Html without the init?
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>

I made a plunker out of mylescc's answer, and it's working fine:
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
There is no picture at there referenced path, of course, but the href link is shown correctly. And actually your code works fine, too. See plunker. So, it seems to me, you haven't initialized angularjs correctly.

Related

Update view only when the json is received completely from ajax call in angularJS

I'm new to angularJS and still learning.
I'm trying to create a navbar in the header which gets the data from ajax call.
However, it shows {{obj.pageData}} until data is completely received.
It is very annoying to see this everytime I refresh the page!
How could I avoid it to show {{obj.pageData}} in the view and rather update it directly when the entire data is received from JSON?
Here's the sample code:
View:
<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
<div class="nav-center">
<!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
<div>
<a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a>
<!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>-->
<!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">-->
<div class="farm-links" ng-show="hovering">
<!--<a class="prev-link" aria-labelledby="{{obj.pagetitle}}">{{obj.pageTitle}}</a>-->
<div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
<a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
<!--<span class="group-title mobile" aria-expanded="false">{{child.pageTitle}}</span>-->
<ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
<li class="second-link">
<a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Controller:
angular.module('topNavApp', []).controller('navCtrl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http){
$http.get("/content/projdata/myJSONData.json").then(function(response){
$scope.pageData = response.data;
})['catch'](function(){
console.log('failed');
});
}]);
Please let me know in case of additional details required.
You can use the angular ng-Clock directive to prevent the brief display of the angular html template.
<div class="nav-center" ng-cloak>
</div>
Another option is to use ng-bind instead of {{}}
You just need to set a condition for controlling when the data should be shown. For this you can use whether ng-show or ng-if.
Like this:
<div ng-if="pageData" ng-cloack ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
<!--- ... -->
</div>
In this example AngularJS evaluates the expression ng-if="pageData" and it will only show the div when pageData is truthy .
In addition you can use ng-cloack in order to avoid any possible flickering of the page.
You can use Angular Resolve which until data is received and then only it renders the data.
Check this stackoverflow

repeat div section in the length of list (Ionic)

I have a custom JavaScript file with some function in it. All the functions work perfectly fine.
One of the functions returns a list modules. I would like to repeat in my template the div section as many times is the length of my list.
This is my ionic template file:
<ion-view title="My Marks" id="page7">
<ion-content ng-controller="MyMarks" padding="true" class="has-header">
<div ng-repeat="module in getCourseModules">
<div class="row">
<div class="col">{{module}}</div>
</div>
<div class="row">
<div class="col col-50">Module Mark</div>
<div class="col col-50">{{GenerateRandomMarks[i]}}</div>
</div>
<br>
<br>
</div>
</ion-content>
And this is my controller inside my app.js:
app.controller('MyMarks', function ($scope){
$scope.courseNum = GenerateRandomNumber(0, 9);
$scope.getCourseName = getCourseName(courseNum);//Returns just Text
$scope.getCourseModules = getCourseModules(courseNum); //Returns the list
$scope.GenerateRandomMarks = GenerateRandomMarks(); //Returns a list of numbers
});
How can I repeat the segment of code I need? and in that segment of code, each time is repeated it should display different element of the list {{getCourseModules[i]}}.
I solved the most of it. But I cant figure out the repeat part. If I manually copy/and paste the code it works fine.
You need to use ngRepeat directive.
<div ng-repeat="model in getCourseModules">{{model}}</div>
<div ng-repeat="model in getCourseModules">{{someAnotherArray[$index]}}</div>

Conditionals in angular templates

I'm currently developping an app using ionic (1.3)/angular (1.5). This is my first time using angular, but I have been developping with ember.js for the past two or three years.
I'm a bit confused by how I can conditionally display stuff in templates : in ember, I would do
<div class="col-xs-12">
{{#if condition}}
some template..
{{else}}
something else
{{/if}}
</div>
But in angular, it seems to me that you'd have to do :
<div class="col-xs-12" ng-if="condition">
some template..
</div>
<div class="col-xs-12" ng-if="!condition>
something else
</div>
Which to me seems really cumbersome and does not really convey the intention. Is there any other (better) way to display stuff conditionally in templates ?
Thanks a lot for your time !
There is one more way to achieve this as show in the code below:-
<div ng-switch="myVar">
<div ng-switch-when="condition1">
some tempelate....
</div>
<div ng-switch-when="condition2">
some tempelate....
</div>
<div ng-switch-when="condition3">
some tempelate....
</div>
<div ng-switch-default>
some fallback template ...
</div>
</div>
try this, here is working fiddle
<div ng-controller="MyCtrl">
<div class="col-xs-12" ng-show="condition">
some template..
</div>
<div class="col-xs-12" ng-show="!condition">
something else
</div>
</div>
controller, try using changing $scope.condition=false
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.condition = true;
//$scope.condition = false;
}

AngularJS: Ng-repeat breaks "Waves" animation

Waves is from here.
http://fian.my.id/Waves/
To add the wave effect, you just have to add the JS and CSS files, then add class="waves-effect waves-button" to the component of your choice, and call Waves.displayEffect();.
Unfortunately, it looks like the angularJS ng-repeat breaks this. There are no errors in the console.
This works:
Click Here
<div class="col-md-4 col-sm-6 garment" ng-repeat="garment in buypage.garments">
</div>
This doesn't:
<div class="col-md-4 col-sm-6 garment" ng-repeat="garment in buypage.garments">
Click Here
</div>
Edit
Moving Waves.displayEffect(); inside controller did not fix it.
Solved
HTML:
<div ng-repeat="garment in buypage.garments" ng-init="initWaves()">
...
</div>
In AngularJS Controller:
$scope.initWaves = function(){
Waves.displayEffect();
}

It is possible use links that will choose a route inside of a ng-view

All samples of ng-view directive shows that it must being used like follows
<div class="header">
</div>
<ng-view></ng-view>
I think a little while taking a shower and the doubt below comes to play with the need of lazily load all content with help of resolves in ng-view plus ng-switch and ng-include. Something new, without an AMD solution to templating like requirejs!text plugin and angularjs providers. The idea is change the subview thru the links inside of ngView. The view template will being something like that:
<div>
Item Profile
status
View1
</div>
<div ng-switch="view">
<div ng-switch-when="item-profile">
<div ng-include="'item-profile.html'">
</div>
<div ng-switch-when="status">
<div ng-include="'status.html'">
</div>
</div>
<div ng-switch="subView">
<div ng-switch-when="1">
<div ng-include="'sub-view1.html'">
</div>
<div ng-switch-when="2">
<div ng-include="'sub-view2.html'">
</div>
<div ng-switch-when="3">
<div ng-include="'sub-view3.html'">
</div>
</div>
And the index.html will looks like:
<body>
<ng-view></ngview>
</body>
And the route configuration:
angular.module('app', ['ngRoute']).config([
'$routeProvider',
function (rp){
rp.when('/:view/:subView', {
template: 'view.html',
controller: [
'$scope',
'$route',
function (s, r) {
s.subView = r.params.subView;
s.view = r.params.view;
}
]
});
}
]);
But for some reason this does not work, follow the code on plunkr
Sounds like you need ui-router, specifically its nested/sub-views and named views.

Categories