<div ng-repeat="item in items | limitTo:$parent.limit=($parent.limit||5)">
...
<a ng-if="$last" ng-bind="$parent.limit===Infinity ? 'Read Less':'Read More'" ng-click="$parent.limit=$parent.limit===Infinity?5:Infinity"></a>
</div>
So the initial limit is only 5 items, and clicking the link changes the text between Read more/Read less. But ngRepeat doesn't pick up on the change and add/remove items. I want ngRepeat to update when I change $parent.limit variable. I'd like to avoid using the controller, if possible.
The ng-repeat directive I believe creates another scope under it for it's child items. So then you would not be talking to the same parent that's referred to in the <div> element. So in your <a> tag you may need to talk to the parent's parent scope.
So try $parent.$parent instead of just $parent within your anchor tag inside of your ng-repeat.
Of course doing this will make the AngularJS gods shed a tear, so I recommend creating a controller or calling a method in your ng-click that will propagate up to the current controller for his template. Then you can move all of that logic outside of your template.
Related
I am trying to make the mid-section to be read only and just enabling the button "OPEN".
I have the below original code. "router-outlet" renders the combination of several feature components. And I do not want to disable each and every elements or feature components
<div="row mid-section">
<router-outlet></router-outlet>
</div>
<div class="row">
<button class="btn btn-default"> OPEN </button>
</div>
I tried by adding as below:
<div="row mid-section" readonly="readonly">
But it still allows to edit and click on button inside mid-section div.
I would really appreciate your help. Thank you!
The HTML readonly property doesn't work like that. Its only for form fields and must be on that actual DOM element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
Without seeing more of your code, I can't really give a better answer than these 2 options.
Option 1, a shared service that has that read only property. You could have a service, that has a behavior subject that you can update from the parent component. The inner components would all need to have that service injected, and do something appropriate when the value changes.
Option 2, you would need a container component that has a new boolean input, and it would need to pass that value down to all the children components (which would also need an input).
I have a template dom-repeat element. I know that I can define the items attribute from an array, so that item can be accessed inside the template. However, I don't know how to access other objects inside the template if I bind them to customer polymer elements.
In this example, items is being defined by someItems, and item is passed into the element <my-el>. I also have a string mine that I want to pass into <my-el> and use there. I currently have the idea to do this in app-el.html, which contains the dom-repeat template:
app-el.html
<template is="dom-repeat" items="[[someItems]]">
<my-el item=[[item]] mine="[[mine]]"></my-el><br>
</template>
In theory, I would be able to access both in my-el.html like this:
my-el.html
[[item]] [[mine]]
However, when I try to access mine from inside <my-el> it is undefined. How can I correctly pass in this string so I can access it?
An MCVE can be found on this Plunker. Note how the item string is defined inside <my-el> but the mine string is not.
Your data bindings look correct, but there is no mine property for my-app. Did you mean to define <my-app>.myProperty as <my-app>.mine? Changing that property name to mine fixes your problem.
plunker
I got an error when i put a nested ng-show attributes for custom directive,
one attribute in the markup of the directive and the second inside the root element of the directive template.
My real scenario are complex so i will simplify it to this example:
Suppose i have my-custom-directive below which already contains ng-show:
<my-custom-directive ng-show="someValue >= 5"></my-custom-directive>
And then the template of 'my-custom-directive' look like this:
<div ng-show="options != null">My Custom Directive</div>
Those multiple ng-show together cause an error.
if i remove one of them or move the inner ng-show at least one level deeper in it's dom tree the error gone (it's happen when it's location is on the root template element).
this error tested on angular v1.4.8.
Is this angular bug? or there is a reasonable explanation for this behavior?
here is the Plunker example:
http://embed.plnkr.co/ZTZVcfc5bfmjPo9t0Isw
Thank you in advance,
Menachem
Because the directive has replace: trueit is trying to merge the two ng-show values together resulting in an error. The simplest solution I believe is to just do replace: false
Or you can inject the value via isolate scope and use a single ng-show value within the directive. I believe this is considered the cleaner solution.
Example: http://plnkr.co/edit/5oc8c1Hrz8N1F2klCio7?p=info
scope: {
someValue: '=someValue'
}
I have a span with an ng-click="..." attribute. The ng-click slightly modifies the span's CSS within the DOM so that it is more button-like. Within my application I wish to toggle whether or not that span is clickable or not. I can make the ng-click not do anything easy enough but what I would prefer is to just remove/disable the attribute altogether. This is to avoid all "buttonizing" that the ng-click does to the element. It would also be nice if the attribute were re-enabled if the clickable variable becomes true again.
I would like a solution that avoids using $scope.$watches because my application is pretty large and watches are slow.
Thanks!
I think you can have two spans with and without ng-click attribute and based on that clickable variable you control those two spans with ng-if or ng-show
Simple solution suggested by to Achu!
Just use two spans rather than toggle the attribute on a single span.
<span ng-if="clickable" ng-click="...">Click me!</span>
<span ng-if="!clickable">Cant click me!</span>
If I were in such a situation, I would not try to enable or disable ng-click attribute. Rather, I would use some flag variable with the $scope to see if click function should perform its functionality or not like in your controller you have a method like
$scope.spanClick = function(){
if(!$scope.shouldClick){
return;//simply do nothing
}
//Do button click logic
}
I'm creating a project with Polymer and have the following code:
<paper-radio-group>
<template repeat="{{answer in answers}}">
<p>
<paper-radio-button name="{{answer.choice}}" label="{{answer.choice}}"></paper-radio-button>
</p>
</template>
</paper-radio-group>
I have a list of answers that I want to use in the paper-radio-group. Displaying this works fine. Every item in the answers array is displayed as a paper-radio-button.
The problem is that they are not connected to each other. So, when selecting one paper-radio-button, another is not deselected. This is probably because the paper-radio-group tag is outside the template tag. But placing it inside would make it repeat like the paper-radio-button and that's not going to work either.
Is there a way to get this to work? Or is it not possible?
The <paper-radio-group> expects <paper-radio-button> as it's children. When you wrap them in other elements like <p> the <paper-radio-group> can't manage the state.
The <template> element is is not actually included in the DOM and doesn't get in the way when the elements are rendered.