I am trying to set a variable to template with if in the HTML. The issue is that I can't see my template and don't have any errors from the logs. I can see that elements are in the HTML but still can't see it.
The template is:
<div class="list-group">
<div id="table_template">
<div id ="table"></div>
<script type="text/template" id="nextPage">
<% if (nextLink != "") { %>
<nav><ul class="pager"><li><a href="#" id="next_page" >Next</a></li> </ul> </nav>
<%}%>
</script>
</div>
</div>
</div>
and the view:
var template = _.template($('#nextPage').html());
view.$el.find('#nextPage').html(template(listSongs));
Update: Looks like I am unable to see it if I have script tag.
A script tag is used so that the browser does NOT render that piece into the whole DOM. You did that assuming that the script tag will print into the view but it won't. You will need to inject it into the view. Try this:
<div class="list-group">
<div id="table_template">
<div id ="table"></div><div id="nextPage"></div>
<script type="text/template" id="nextPageTemplate">
<% if (nextLink != "") { %>
<nav><ul class="pager"><li><a href="#" id="next_page" >Next</a></li> </ul> </nav>
<%}%>
</script>
</div>
</div>
Then in your view it can look like this:
var template = _.template($('#nextPageTemplate').html());
view.$el.find('#nextPage').html(template(listSongs));
Now I'm unsure if your view El is "list-group" (but I hope it is).
Related
I'm using angular 1.4.8. I want to save filtered result from ng-repeat and use it to determine whether to enable a "load more" button at the bottom of the list. I have looked at this question:
AngularJS - how to get an ngRepeat filtered result reference
And many others, they suggest to use "as alias" from ng-repeat, here's what my code looks like:
<ul class="media-list tab-pane fade in active">
<li class="media">
<div ng-repeat-start="item in items | limitTo: totalDisplayed as filteredResult">
{{item}}
</div>
<div class="panel panel-default" ng-repeat-end>
</div>
<div>
{{filteredResult.length}}
</div>
</li>
</ul>
<button ng-click="loadMore()" ng-show="totalDisplayed <= filteredResult.length">
more
</button>
However, I found filteredResult.length is displayed fine right after ng-repeat, but the button is never shown. If I try to display filteredResult.length in where the button is, it will show null.
So is there a rule for "as alias" scope? I've seen plenty of examples work but mine doesn't, what am I missing here?
EDIT:
The accepted answer uses controllerAs which indeed will resolve the problem. However, charlietfl's comment using ng-init to save filteredResult to parent scope is also very neat and that's the solution I use in my code eventually.
Probably some of classes in your <ul class="media-list tab-pane fade in active"> or <li class="media"> is selector for a directive that would have its own scope. So you store filteredResult in e.g. tab-pane's scope and then try to have access out of it's scope in outside of ul tag.
Try to use Controller as instead of scope:
angular
.module('plunker', [])
.controller('MainCtrl', function() {
vm = this;
// make an array from 1 to 10
var arr = [];
while (arr.length < 10) {
arr.push(arr.length + 1)
};
vm.items = arr;
vm.totalDisplayed = 5;
vm.filteredResult = [];
});
<body ng-controller="MainCtrl as main">
{{main.items}}
<ul class="media-list tab-pane fade in active">
<li class="media">
<div ng-repeat-start="item in main.items | limitTo: main.totalDisplayed as filteredResult">
{{item}}
</div>
<div class="panel panel-default" ng-repeat-end>
</div>
<div>
filteredResult = {{main.filteredResult = filteredResult}}
</div>
</li>
</ul>
<button ng-click="loadMore()" ng-show="main.totalDisplayed <= main.filteredResult.length">
more
</button>
</body>
http://plnkr.co/edit/drA1gQ1qj0U9VCN4IIPP?p=preview
I have recursive partial in angular for showing comments threads. And I have controls for edit and delete. Deleting working on server but i can't update client.
My main page:
<div class="list-group-item" ng-repeat="ch in img.comments" ng-include="'views/nestedComment.html'">
</div>
My partial look like:
<div class="list-group-item-info">
<h4>{{ch.app_user.email}}:</h4>
{{ch.body}}
<div class="controls" ng-if="ch.app_user_id==user.getUser().id">
<%=t :edit %>
<%=t :destroy %>
<%=t :answer %>
<%=t :shownested %>
<div class="list-group-item-danger" ng-repeat="ch in ch.children" ng-show="nested" ng-include="'views/nestedComment.html'">
</div>
</div>
</div>
And I use this function to delete
$scope.deletenested=function(parent,item){
$scope.$evalAsync(function(){
parent.children.splice(parent.children.indexOf(item),1);
})
$http.delete('/comments/'+item.id)
.success(function(){
alert('OK')
parent.children.splice(parent.children.indexOf(item),1)
})
.error(function(response,status){
if (status=='401'){
alert('You have to autorize')
$window.location.href='http://localhost:3000/app_users/sign_in';
}
})
}
This worked for me when i didn't use partials. But now i can't access to parent array.
I'm starting a new project and am going to be using angular in a "single page architecture" application. I'm a little new to angular.
So, I purchased a template for my site. It has 2 distinct layouts that I would like to use. 1 for my unauthenticated (marketing) pages and another for most of my authenticated pages.
The difference in each is subtle, but the inside pages require a class on the <body> tags that the outside pages cannot have. I considered using 2 layouts but then that got tricky as I started thinking about how I would lay out my urls.
My thought is to use angular to manage my layout so that I only need one master page like this:
<body ng-class="{menu-right-hidden: isInternalPage }">
<div class="container-fluid">
<div ng-if="isInternalPage" id="menu" class="hidden-print hidden-xs sidebar-blue sidebar-brand-primary">
<!-- sidebar content -->
</div>
<div id="content">
#RenderBody()
</div>
<div class="clearfix"></div>
<div ng-if="isInternalPage" id="footer" class="hidden-print">
<!-- internal footer -->
</div>
<div ng-if="!isInternalPage" id="footer" class="hidden-print">
<!-- external footer -->
</div>
</div>
</body>
My question is this: Is there an easy way to set isInternalPage (and possibly other valies) without having $scope.isInternalPage = true/false; decorating all of my controllers?
You could use ng-init and define a scope variable on $rootScope:
<body ng-init="$root.isInternalPage = true" ng-class="{menu-right-hidden: $root.isInternalPage }">
<div class="container-fluid">
<div ng-if="$root.isInternalPage" id="menu" class="hidden-print hidden-xs sidebar-blue sidebar-brand-primary">
<!-- sidebar content -->
</div>
<div id="content">
#RenderBody()
</div>
<div class="clearfix"></div>
<div ng-if="$root.isInternalPage" id="footer" class="hidden-print">
<!-- internal footer -->
</div>
<div ng-if="!$root.isInternalPage" id="footer" class="hidden-print">
<!-- external footer -->
</div>
</div>
</body>
Alternatively, you could assign your variable on $rootScope inside one of your controllers:
app.controller('ctrl', function($rootScope) {
$rootScope.isInternalPage = true;
});
What you can do in this case is create an AngularJS service: "You can use services to organize and share code across your app"
angular.module('core').service('GlobalVars', [ 'addDependenciesHere',
function(addDependenciesHere) {
this.isInternalPage = someVal ? true : false
}
]);
Then inject this into the constructor for each controller
angular.module('core').controller('HomeController', ['$scope', 'GlobalVars',
function ($scope, GlobalVars) {
$scope.globals = GlobalVars;
}
]);
Then in your view you can access this directly
<body ng-class="{menu-right-hidden: globals.isInternalPage }">
In AngularJS, to simply show a field through an a tag, I would do in this way:
<div ng-show="aField">Content of aField</div>
<a ng-click="aField=true">Show aField</a>
until here, no problem.
I would like now to put more buttons and fields so that, when I click on A it shows the content of A, then when I click on button B, content of A disappears and content of B appears.
How can I do this? Thank you.
UPDATE
Thank you everyone for your solutions, they works! Now, I am doing a template for every content of and because I have much data to show but all in the same structure.
Here the index.html
<div ng-model="methods"
ng-include="'templateMethod.html'"
ng-repeat = "method in methods">
here the script.js:
function Ctrl($scope) {
$scope.methods =
[ { name: 'method1',
description: 'bla bla bla',
benefits: 'benefits of method1',
bestPractices : 'bestPractices',
example: 'example'},
{ name: 'method2',
description: 'bla bla bla',
benefits: 'benefits of method2',
bestPractices : 'bestPractices',
example: 'example'} ];
}
and here the templateMethod.html:
<table>
<tr>
<td>
<div ng-show="toShow=='{{method.name}}Field'">
<h3>{{mmethodethod.name}}</h3>
<p>
<strong>Description</strong>
{{method.description}}
</p>
<p>
<strong>Benefits</strong>
{{method.benefits}}
</p>
<p>
<strong>Best practices</strong>
{{method.bestPractices}}
</p>
<p>
<strong>Examples</strong>
{{method.example}}
</p>
</div>
</td>
<td class = "sidebar">
<ul>
<li><a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>
</ul>
</td>
</tr>
</table>
It works!
But: if I click the first button and then the second one, the content of the first button do not disappear, it appears under the content of the first button...
Problem with the repetition?
Thanks
It might be better to handle more complex logic in the controller, but in general think about the content of the directive strings as normal js:
<div ng-show="aField">Content of aField</div>
<div ng-show="bField">Content of bField</div>
<a ng-click="aField=true; bField=false">Show aField</a>
<a ng-click="aField=false; bField=true">Show bField</a>
Or use ng-show in concert with ng-hide:
<div ng-show="aField">Content of aField</div>
<div ng-hide="aField">Content of bField</div>
<a ng-click="aField=true">Show aField</a>
<a ng-click="aField=false">Show bField</a>
In the former strategy, nothing shows upon page load. In the latter, the bField content shows by default. If you have more than two items, you might do something like:
<div ng-show="toShow=='aField'">Content of aField</div>
<div ng-show="toShow=='bField'">Content of bField</div>
<div ng-show="toShow=='cField'">Content of cField</div>
<a ng-click="toShow='aField'">Show aField</a>
<a ng-click="toShow='bField'">Show bField</a>
<a ng-click="toShow='cField'">Show cField</a>
I'm guessing that you have a list of items and want to show each item content. Something an accordion component does.
Here is a plunker that shows how you could do it: http://plnkr.co/edit/UTf3dEImiDReC89vULpX?p=preview
Or if you want to display the content on the same place (something like a master detail view) you can do it like this: http://plnkr.co/edit/68DJHL582oY4ecSiiUdE?p=preview
simply use one variable which content is visible. http://jsfiddle.net/gjbw7/
<a ng-click="show='a'">Show aField</a>
.
<div ng-show="show=='a'">Content of aField</div>
I would recommend to create a service in case your fields belong to different controllers.
Service:
App.factory('StateService', function() {
return {
openPanel: ''
};
});
Injecting the service in a Controller:
App.controller('OneCtrl', function($scope, StateService) {
$scope.stateService = StateService;
});
Finally using it a view:
<a ng-click="stateService.openPanel='home'">Home</a>
<div ng-show="stateService.openPanel == 'home'">Content of Home</div>
Demo: http://jsfiddle.net/codef0rmer/BZcdu/
Try this way.
<div>{{content}}</div>
<a ng-click="content='a'">Show aField</a>
<br>
<a ng-click="content='b'">Show bField</a>
<br>
<a ng-click="content='c'">Show cField</a>
<br>
<a ng-click="content='d'">Show dField</a>
<br>
<a ng-click="content='e'">Show eField</a>
<br>
<a ng-click="content='f'">Show fField</a>
Take a look at the ng-switch directive.
<div ng-switch="aField">
<div ng-switch-when="someValue1">
HTML content that will be shown when the aField variable value is equal to someValue1
</div>
<div ng-switch-when="someValue2">
HTML content that will be shown when the aField variable value is equal to someValue2
</div>
<div ng-switch-default>
This is where the default HTML content will go (if aField value is not equal to any of the ng-switch-when values)
</div>
</div>
I'm new to angular and was wondering how to tackle the following situation. I'm using angular with jquery mobile and am creating a one page app. When the app loads, I have it create pages or divs inside the body tag. I have two types of pages, "typical pages" and "video pages" but I want to use one object to create both page types. I want to use one object because I also use that object to create my menu and I don't want to have to edit multiple objects.
My issue is, I want to create a "typical page" for each element in the object but I only want to create a "video page" for each object that doesn't have "videoPage: false". I tried using ng-if on the "video page" ng-repeater (see html below) but it doesn't seem to be working. Can I use the ng-if on a ng-repeater?
I have the following data/object:
function App($scope){
$scope.pages = [
{
id: "intro",
title: "Intro",
videoPage: false
},{
id: "activeStretches",
title: "Active Stretches by Area"
},{
id: "passiveStretches",
title: "Passive Stretches by Area"
}
];
}
And the html:
<body ng-app ng-controller="App">
<div data-role="page" id="{{page.id}}" ng-repeat="page in pages">
<div data-role="header" data-theme="h">
<a data-rel="back" data-icon="arrow-l">Back</a>
<h1>{{page.title}}</h1>
</div>
<div data-role="content">
<div class="content-side">
<ul data-role="listview" data-inset="true">
<li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
{{menu.title}}
</li>
</ul>
<div class="logo"></div>
</div>
<div class="content-main">
Typical Page
</div>
</div>
</div>
<div data-role="page" id="{{page.id}}Video" ng-repeat="page in pages" ng-if="page.videoPage">
<div data-role="header" data-theme="h">
<a data-rel="back" data-icon="arrow-l">Back</a>
<h1 class="vidTitle"></h1>
</div>
<div data-role="content">
<div class="content-side">
<ul data-role="listview" data-inset="true">
<li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
{{menu.title}}
</li>
</ul>
<div class="logo"></div>
</div>
<div class="content-main">
Video Page
</div>
</div>
</div>
</body>
ng-if is new as of 1.1.15 so make sure you're using a new (currently unstable) version of Angular.
And, yes, you can mix ng-if with ng-repeat. Here's a fiddle showing it in action (using 1.2): http://jsfiddle.net/rbQry/1/
Note this line (switch the ng-if to "true" and the repeat comes back):
<li ng-repeat="phone in phones | filter:query" ng-if="false">