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
Related
there are multiple panels and sub-panels (DIVs), that i need to show its (panel) controls on click to do specific tasks. The project is cv builder with front-end editing capabilities. So in regard to show/hide panels, my approach is very basic so hoping there would be much better way to getting this done.
Here is HTML Markup
<div class="panel component-about" ng-class="{'active': aboutPanel}" ng-click="activePanelAbout()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
Some text (textarea)
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
<div class="panel component-experience" ng-class="{'active': expPanel}" ng-click="activePanelExp()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
<ul class="panel-componenets">
<li ng-repeat>
Title
Content
</li>
</ul>
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
<div class="panel component-skills" ng-class="{'active': skillsPanel}" ng-click="activePanelSkills()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
Further please check markup figure in (below) screenshot.
In reference to attached screenshot, there are multiple panel sections and most of panels also have sub-panels and each panel has its own control type which need to be show on click.
Here is JS (Controller)
// for setting popups
$scope.aboutToggle = false;
$scope.expToggle = false;
$scope.skillToggle = false;
// about panel
$scope.activePanelAbout = function() {
$scope.aboutPanel = true;
$scope.expPanel = false;
$scope.skillPanel = false;
}
// experience panel
$scope.activePanelExp = function() {
$scope.aboutPanel = false;
$scope.expPanel = true;
$scope.skillPanel = false;
}
// skill panel
$scope.activePanelSkill = function() {
$scope.aboutPanel = false;
$scope.expPanel = false;
$scope.skillPanel = true;
}
Now i think the picture should be clear. The panels are toggling actually, but i require more better approach something like this that we use to do in javascript/jquery.
I hope i have covered all aspects of my question, if not please do guide me so i can clarify myself. I'm looking forward for your guidance.
Thanks in advance.
this in AngularJS ends up a bit different than plain old JS. Since a controller contains its own $scope in relation to the DOM of which the controller is instantiated, this doesn't always refer to the object that calls a function, etc. So I can think of two options:
First maybe simplify how you're changing the active class for each panel and it's children. So maybe just:
$scope.activePanel = "";
$scope.ChangeActivePanel = function(newPanel) {
$scope.activePanel = newPanel;
}
And then change the ng-class for each panel to ng-class="{'active': activePanel == 'about'}" or ng-class="{'active': activePanel == 'skills'}", etc. Then change ng-click on the panels to ng-click="ChangeActivePanel('about')" or whatever to update the variable. In all honesty, just ng-click="activePanel = 'about'" would work but the ChangeActivePanel function could be expanded to handle behavior of the children panel elements as well. Just a thought rather than having three different functions and toggling all of these variables.
Second option is to create controllers for each panel by declaring ng-controller="aboutController" or ng-controller="skillsController" to each panel and then each panel would have it's own $scope but you'll have to declare and attach each controller to the app module and you'll run into headaches if you need to share data across controllers and will have to use factories/services, etc. I think that's overkill for something like this. Plus, it's difficult to manage which $scope is which across multiple controllers within the same view.
Hopefully this gives you something to work with.
I have a loop ng-repeat that displays sevral icons.
<div class="box">
<div class="box-body">
<div class="row" >
<div class="col-sm-6" style="margin-bottom: 5px;" ng-repeat="record in newlayout.display" align="center">
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
<span class="badge bg-yellow" style="font-size:22px;">{{record.numberOfSamples}}</span>
<i class="fa fa-{{newlayout.labStyle}}"></i> {{record.lab}}
</a>
</div>
</div>
</div>
</div>
My issue is that the second part of the binded variable itemValue should be dynamic
In my Js, I have this
newLayout.url = 'sublabs/?labName=';
newLayout.itemValue = 'record.lab';
The URL is dynamic.
When I click on the first displayed Icon, the url should look like this :
But it didn't work as I had a compilation error..
Does someone have an idea how to fix this:
http://localhost:8181/#/newlayout/sublabs?labName=PIA/C1 - Shiftlabo
Where the record value "PIA/C1 - Shiftlabo" change.
So basically here if I change
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
{{newlayout.itemValue}} by {{record.lab}} it would work..but the {{record.**lab**}} should be dynamic as it will have another value when I click on the icon. It will change to {{record.subLab}}
Thanks
Use property acccessor bracket notation inside the binding:
<div>{{record[labOrSublab]}}</div>
JS
var isSublab = false;
$scope.labOrSublab = "lab";
$scope.clickHandler = function() {
isSublab = !isSublab;
$scope.labOrSublab = isSublab ? 'subLab' : 'lab';
};
I got some problem on AngularJS.
my controller, mainCtrl, has this variables :
this.colors = {Sam:blue,Jane:red,Tom:pink};
this.arr = [{person:'Sam',story:'some story'},{name:'Tom',story:'some story2'}]
And I got this code :
<div ng-controller="mainCtrl as vm">
<ul ng-repeat="obj in arr">
<li ng-style={color:vm.color[obj.person]}>{{obj.story}}</li>
</ul>
</div>
I want that the li will be colored such as the color of the person at colors dictionary . how can I handle that? I got undefined every time, but when I do it explictly its work , for Example :
<li ng-style={color:vm.color['Sam']}>{{obj.story}}</li>
You are using the controllerAs-Syntax, so you must use vm.arr in your ng-repeat. And furthermore you should use the ng-repeat on the list item:
<ul>
<li ng-repeat="obj in vm.arr" ng-style="{color:vm.color[obj.person]}">{{obj.story}}</li>
</ul>
It should look like this.
<div ng-controller="mainCtrl as vm">
<ul>
<li ng-repeat="obj in vm.arr track by $index"
ng-style="{'color':vm.colors[obj.person]}"
ng-bind="obj.story">
</li>
</ul>
</div>
Remember to use your alias vm (controllerAs)
Usetrack by with ng-repeat for better performance.
I think that ng-repeat should have been placed in li
Her's a working jsfiddle http://jsfiddle.net/irhabi/nh4ddemr/
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
Today I faced a strange problem for me in AngularJS.
In this example I have two ng-repeat in product (two or three images and the same number of colors) and one ng-repeat for pagination (irrelevant in this case I assume).
HTML:
<div class="item-wrapper" ng-repeat="item in pagedItems[currentPage]">
<div class="item">
<!-- Item image -->
<div class="item-image">
<ul>
<li ng-repeat="desc in item._source.description" ng-show="$first">
<img class="preview" ng-src="server/{{desc.smallImage.url}}">
</li>
</ul>
</div>
<!-- Item details -->
<div class="item-details">
<div class="product-colors">
<ul class="btn-group pull-right">
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" />
</li>
</ul>
</div>
</div>
</div>
All I wanted to do is that click on one of colors (img.color) changes corresponding img.preview visibility. In my attempts I was always able to changed every img.preview in whole list, not the one I clicked on.
MY ATTEMPTS:
HTML
<li ng-repeat="desc in item._source.description" ng-show="$index === selectedColor">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index)">
JS (controller)
$scope.changeColor = function(idx) {
$scope.selectedColor = idx || 0; //default show always first img.preview from list
};
MY ATTEMPTS #2 (working)
HTML
<li><img class="preview" ng-src="server/{{desc[__selected === $index ? __num : 0].smallImage.url}}">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index, key)">
JS (controller)
$scope.changeColor = function(idx, key) {
$scope.__selected = key;
$scope.__num = idx;
};
This might be quite simple:
Considering desc and color will be referring to same object as they are of the same source.
So, desc and color should be identical and setting a property on either of them supposed to reflect on the other.
Make the changes as follow and try, havent tested though:
<li ng-repeat="desc in item._source.description" ng-show="item.__selected ? desc==item.__selected : $first">
and
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" ng-click="item.__selected = color" />
</li>