I have tried to do the following:
<accordion-heading ng-click="doSomething(); isopen=!isopen">
Should this work? or is it not possible to string there call together?
ng-click="doThis(param); doThat(param);"
I just need pointed in the right direction :-)
EDIT:
this:
ng-click="doThis(param); doThat(param);"
works as expected, I think it is:
isopen=!isopen
that is causing the problem, I realise I didn't say this initially.
I go around this by adding an extra div into the accordion heading, like this:
<accordion-heading ng-click="isopen=!isopen">
<div ng-click="showMainView()">
<i class="glyphicon" ng-class="{'glyphicon glyphicon-minus': isopen, 'glyphicon glyphicon-plus': !isopen}"></i>
{{item.model}}<br>{{item.model_engine}}
</div>
</accordion-heading>
possible !! possible !! possible !! possible !! possible
You can call multiple functions with ';'
See here
Using ng-click to call two different functions
How to add many functions in ONE ng-click?
How to use ng-click with multiple expressions?
It works:
http://plnkr.co/edit/fwSdBT3NIBrlk80aTgaB?p=preview
However be careful not to do too much logic in there. You should put the logic in the controller and only call it from the view. (isopen = !open for example doesn't belong on the view)
Related
I am new in angular. I click a button using ng-click. I send it paramter. Every is ok.
<div class="item item-text-wrap" ng-click="GetRecordPDF({{item.RecordId}})"></div
After this, I need change view and this view's controller will make a service call using "item.RecordId" parameter.
I hope I will explain what I want to do. Maybe, I make a wrong thing about call ing methods in angular.
How can I make this? Thanks in advance.
You no longer need the brackets '{{}}' for variables. You can read more over expressions on this site: https://docs.angularjs.org/guide/expression
Write this now:
<div class="item item-text-wrap" ng-click="GetRecordPDF(item.RecordId)"></div>
So i have four progress bars that on click open and close via the close button in the top right....problem is the ngrepeat is messing with something....i've tried adding $parent to the child ngClick but it doesnt work. I've looked at all the other stack examples of this and just can't seem to figure out how to apply it to this specific situation
http://codepen.io/anon/pen/JorZoE
<div class="progress-bar repeat-animation" ng-click="showClose = false" ng-class="!showClose ? 'grow' : ''" progress-morph style="width: {{item.percent}}%" ng-repeat="item in list">
<div class="close" ng-hide="showClose" ng-click="onClickClose($event)" ><img src="close42.svg" alt=""></div>
</div>
I assumed that you wanted to open/close the bars individually.
If that's the case, your code wasn't working because you were binding all the progress bars state to the same $scope variable.
Having that in mind, I tweaked your code a little bit to make it work, and also used a more readable logic (imho).
Please take a look and let me know:
http://codepen.io/anon/pen/WbZygb?editors=101
<div ng-switch="signedIn()">
<a ng-switch-when="false" >Text1</a>
<a ng-href="#/post_form" ng-switch-when="true">Text2</a>
</div>
Edit//
When $scope.signedIn is getting changed both Text1 and Text2 are visible.
So it works as intended untill you log in/log out - then for a second both Text1 and Text2 are visible.
Edit//
All answers suggesting using ng-if ng-hide/show - problem is still there.
I know that ng-if is "DOM friendly".
I understand the simplicity and readability of the switch, as well as the nesting that it provides, but I would suggest going with something more basic.
You can certainly use the ng-show/ng-hide approach that rhasarub suggested in their answer, but because you appear to be doing something regarding login, I would suggest using ng-if. The difference is that when the condition is not met, then the DOM is not rendered at all, so it cannot be inspected by a curious/knowledgeable user.
<a ng-if="!signedIn()" >Text1</a>
<a ng-href="#/post_form" ng-if="signedIn()">Text2</a>
Problem was caused by also applying transition on border-bottom property, removing it solved problem.
You don't need ng-switch for a simple boolean value. You can use ng-show and ng-hide instead:
<a ng-hide="signedIn()" >Text1</a>
<a ng-href="#/post_form" ng-show="signedIn()">Text2</a>
<div ng-switch-on="signedIn()">
<a ng-switch-when="false">Text1</a>
<a ng-href="#/post_form" ng-switch-when="true">Text2</a>
</div>
I'm trying to use the Switch component from Zurb's Foundation.
It works great until you put it inside an ng-repeat. Then, all the switches except the last one are broken--they don't display the labels until you click them.
Here's a JSBin documenting the issue. Anyone know what's up?
You need ng-model on your radios. It works fine in your JSBin if you include an ng-model on each radio button.
According to the docs, value is also required.
Edit:
Okay look at this version, I finally got it to work with both ng-model and ng-value, which I've learned is preferable to value. What do you think, does that work for you?
Apparently ng-repeat created a child scope for each iteration. Using $parent seems to be a way around that.
Found I had to use "ng-checked" in the following fashion for it to work as expected within an "ng-repeat". As long as the ng-clicked var is unique per switch, should work as expected. Make the toggle function something that toggles the visible value between true and false.
<div class="switch" ng-click="toggle()">
<input type="radio" ng-checked="!visible">
<label>Off</label>
<input type="radio" ng-checked="visible">
<label>On</label>
<span></span>
</div>
Hope that helps someone.
Is there a way to have a HTML-view with pre-populated values from the server, and then get AngularJS to read those values into it's $scope?
I'm thinking of a scenario where the HTML is like this:
<div ng-controller="TestController">
<div ng-bind="title">Test Title</div>
<div ng-bind="itemCount">33</div>
<div ng-repeat="item in items">
<div ng-bind="item.title">Item 1 Title</div>
</div>
</div>
<button ng-click="update()">Update</button>
And the JavaScript is like this:
function TestController($scope) {
$scope.update = function() {
console.log($scope.title); // Should log "Test Title"
};
}
The thought behind this is to let the server render HTML that search engines can index, but have a JavaScript-model-representation of the content for manipulation through JS.
While ng-init is one solution, it requires you to explicitly set the value. So here is an alternative solution.
http://plnkr.co/edit/pq8yR9zVOHFI6IRU3Pvn?p=preview
Note : This solution wont work for ng-repeat. Control flow directives cant be used with this. But for simple extraction of information from ng-bind this works pretty well. All that you need to do is add the default directive ( code in plunk ) to wherever you are doing the bind and it will extract the text content and push it to the scope variable.
EDIT (solution with ng-repeat):
So, I was thinking of a way to make ng-repeat also work the same way. But getting ng-repeat to work like this isnt an easy job ( see the code for proof :P ). I have finally found a solution - here you go :
http://plnkr.co/edit/GEWhCNVMeNVaq9JA2Xm2?p=preview
There are a couple of things you need to know before you use this. This hasnt been thoroughly tested. It only works for repeating over arrays ( not objects ). There could be cases that have not been covered. I am overriding ngRepeat itself which could have other consequences. When you loop through the items ( in your server side code ) dont forget to add default="true" on the first element and default on the rest of the elements.
Hope this helps.
Add ng-init to your elements with the value so that it will work the way you want.
http://docs.angularjs.org/api/ng.directive:ngInit
I think what you really want is to make your application searchable by serving static files in parallell. Read more about it here http://www.yearofmoo.com/2012/11/angularjs-and-seo.html