I am unable to access special properties of ngRepeat in md-virtual-repeat. I would like access $last property for the md-divider. However this always returns null.
As stated at https://material.angularjs.org/latest/api/directive/mdVirtualRepeat,
Virtual repeat is a limited substitute for ng-repeat
actually it supports only $index.
In case when md-on-demand directive is used you can use getLength() function as #Ashish already said:
<md-virtual-repeat-container id="vertical-container">
<div md-virtual-repeat="item in ctrl.dynamicItems"
md-on-demand
class="repeated-item"
flex>
{{item}}
<md-divider ng-if="$index !== ctrl.dynamicItems.getLength() - 1"></md-divider>
</div>
</md-virtual-repeat-container>
if you do not want to use md-on-demand directive, then you can use items.length:
<md-virtual-repeat-container id="vertical-container2">
<div md-virtual-repeat="i in ctrl.items" class="repeated-item" flex>
Hello {{i}}!
<md-divider ng-if="$index !== (ctrl.items.length - 1)"></md-divider>
</div>
</md-virtual-repeat-container>
here is modified official codepan: http://codepen.io/anon/pen/qRaoJK
Related
I list some contacts. and want to filter md-list according to entered value $query.
<md-contact-chips
ng-model="ctrl.contacts"
md-contacts="ctrl.delayedQuerySearch($query)"
md-contact-name="name"
md-contact-image="image"
md-contact-email="email"
md-require-match="true"
md-highlight-flags="i"
filter-selected="ctrl.filterSelected"
placeholder="To">
</md-contact-chips>
<md-list class="memberList">
<md-subheader class="md-no-sticky">Contacts</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts | filter: $query" <!--need set filter according to enrered value-->
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img class="md-avatar"
ng-src="assets/images/avatars/avatar-1.png"
src="assets/images/avatars/avatar-1.png">
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
</md-list-item>
</md-list>
will be glad for help.thanks.
"query" is a custom action on an AngularJS $resource. It's available for use OOTB - you don't need to create an special code to register or use it.
There's a good example in the AngularJS tutorial:
https://docs.angularjs.org/tutorial/step_05
app/phone-list/phone-list.template.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="$ctrl.query" />
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
I assume that $query is something that is injected inside your controller.
In order to use it in the view you need to bind it to the $scope of the controller.
inside your controller please add the following line assusing $query is of type string. (ie. Value or constant)
$scope.query = $query;
My feeling is that $query is actually a service of some sort. if that is the case it will have some sort of access function to get the query such as getQuery(), assuming that is the case plese add the following code to inside your controller.
$scope.query = $query.getQuery();
$scope.$watch(function() {
return $query.getQuery();
}, function(query){
$scope.query = query;
});
and then last but not least change your html to
filter: query
please note the question is somewhat broad as it does not explain what $query is.. i hope this helps.. cheers
I want to have a md-menu on a md-2-line list-item directive. note: NOT on the secondary action but primarily on the list item itself. The documentation states that the first element is used as trigger and is left in the DOM, while the second represents the menu contents. So I was surprised that the following structure does not work.
<md-list>
<md-menu>
<md-list-item class="md-2-line" ng-click="openMenu($mdOpenMenu, $event)" ng-repeat="prop in properties">
<div class="md-list-item-text">
<h3>{{ prop['display_name'] }}</h3>
<p>{{ object[prop.key] }}</p>
</div>
</md-list-item>
<md-menu-content width="6">
<md-menu-item ng-repeat="val in prop['values']">
<md-button ng-click="updateAttribute(prop.key, val)">
{{val}}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list>
However, I don't really see what I am doing wrong. I also keep getting the following errors, of which I do not know the meaning:
angular.js:13550 TypeError: Cannot read property 'hasAttribute' of undefined
at r (http://localhost/flatt.io/app/node_modules/angular-material/angular-material.min.js:13:26527)
and
angular.js:13550 TypeError: Cannot read property '0' of undefined
at enableHoverListener (angular-material.min.js:13)
Regards
Your ng-repeat where prop is defined is on the md-list-item tag. prop falls out of scope when that tag is closed, so it's not available when you go to define your md-menu-content.
How to append expression variable on ng-repeat in Angularjs
My code:
<div class="col-md-9" ng-controller="AddOrderController">
<div class="owl-demo" class="owl-carousel" ng-repeat="t in [1,2]">
<div class="item" ng-repeat="d in datas.item{{t}}" >
<imagedata value="d"></imagedata>
</div>
</div>
</div>
Error this line: ng-repeat="d in datas.item{{t}}"
i have data.items1, data.item2 json data
how to declare datas.item{{t}} ?
you can't use an expression in this case, but you don't need to because the t variable is already available to you. just use ng-repeat="d in datas['item' + t]"
If this ng-repeat is throwing Duplicate Key in Repeater, you may have to modify it slightly to be ng-repeat="d in datas['item' + t] track by $index"
How about ng-repeat="d in datas['item'+t]"?
How do I get the id of a parent element of currently clicked element in AngularJS?
<div id="d8" class="menutitles ng-scope" ng-repeat="title in list">
<div class="right" ng-click="showsubmenu($event)">+</div>
<div class="left" ng-click="showsubmenu($event)">Unit 9</div>
</div>
How to get the value d8 in showsubmenu($event) function?
Below is what I tried but it doesn't work
$scope.showsubmenu=function(obj)
{
alert(obj.target.parent.attributes.id)
}
It should be parentNode, not just parent:
alert(obj.target.parentNode.id);
Also attributes is redundant as you can access id property directly.
But note, that since you have ngRepeat, it will create invalid markup, since ids are going to be duplicated. You probably want to fix this too, maybe like this or use classes:
<div id="d8{{$index}}" class="menutitles ng-scope" ng-repeat="title in list">
<div class="right" ng-click="showsubmenu()">+</div>
<div class="left" ng-click="showsubmenu()">Unit 9</div>
</div>
<div id="d8" class="menutitles ng-scope" ng-repeat="title in list">
<div class="right" ng-click="showsubmenu()">+</div>
<div class="left" ng-click="showsubmenu()">Unit 9</div>
</div>
It should be enough :D
function showsubmenu($event){
$($event.target).parent();
}
Have a nice day
As an addition to Pedro's answer I'd say that using the jQuery method closest would be preferable.
function showsubmenu($event){
var parent = $($event.target).closest('.yourclass'); // or any selector you prefer
}
I have the template:
<div ng-repeat="CableFilterName in CableFilterNames">
<fieldset>
<legend>{{CableFilterName.filterName}}</legend>
<ul id="">
<li ng-repeat="filterValue in CableFilterName.filterValues">
<input type="checkbox"/> {{filterValue}}
<!-- <select> -->
</li>
</ul>
</fieldset>
</div>
where filterValue in nested ng-repeat has several different values. So question is how to define what is current filterValue-value and depending on it use checkbox or select or any arbitrary HTML ?
UPD:
filterValues = ['Cable System','Electrical', 'Lighting'];
To have a kind of if statement, you can use the ngSwitch directive in AngularJS :
http://docs.angularjs.org/api/ng.directive:ngSwitch
For example on your ngRepeat loop :
<div ng-switch on="filterValue">
<div ng-switch-when="value1">//Do what you want when "value1"</div>
<div ng-switch-when="value2">//Do what you want when "value2"</div>
...
<div ng-switch-default>//Do what you want by default</div>
</div>
I Hope it's what you want, I don't really understand what you try to achieve.