I have an app with several modals on the page. What I'd like to do is have only one controller function that toggles the visibility of the modals. So, let's say I have the following:
<a href ng-click="openModal(modal1)></a>
<a href ng-click="openModal(modal2)></a>
Then I'd like the modals to have something along the lines of:
<div class="modal" ng-show="openModal(modal1)">
<div class="modal" ng-show="openModal(modal2)">
Hope this is clear. I'm new to angular so kind of lost on this one. I know I can set a bunch of functions that toggle the boolean of that specific modal type, but then my controller would get big pretty fast. I'd like to keep it as concise and clean as possible. Thank you in advance for your time.
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = $scope.custom === false ? true: false;
};
}]);
Use ng-toggle and do an ng-toggle. It works on-click and you'll just need to set the property for each modal and then pass it in. So, something like..
$scope.modal1visibility = true;
$scope.modal2visibility = false;
Then you should just be able to pass in those individual properties to the toggle functions and that should do what you're wanting it to do. Hope I understood your question and that this helps
http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm this link looks like it might be what you're talking about. I think I may have misunderstood after some further looking..
Related
Really simple objective but i cannot seem to get it to work. I have 2 toggles (using ionic css) that represent 2 modes. Only 1 mode can be on at a time, so when you toggle one on, the other should turn off (visually and in code).
I have binded the toggles with ng-model and an ng-click, but they are not working. This is what the toggles look like:
<input type="checkbox" ng-click='turnOnAC(true)' ng-model='ac'>
<input type="checkbox" ng-click='turnOnFan(true)' ng-model='fan'>
So when turnOnAc(true) is called, it should set $scope.ac = true and $scope.fan = false.
$scope.turnOnAC = function(bool){
if(bool == true){
$scope.fan = false;
$scope.ac = true;
}
};
It must be something silly I am forgetting, but I am blind to it! Could anyone help me out?
http://jsfiddle.net/dvtofn6L/59/
you didn't inject $scope in your controller function. so you should inject $scope and the should working fine.
app.controller('NavController', function ($scope) {
and if you don't use this in your controller then you may no need to use controller as
so use
<div class="nav" ng-controller="NavControlle">
instead of
<div class="nav" ng-controller="NavController as nav">
You're missing the $scope param in your Controller's function:
app.controller('NavController', function ($scope) {...
I am trying to figure out a simple way to swap a link in a button in angular js, I have properties available in the scope that I can use, but I am not sure how to implement. The link I am trying to alter is in the 'onClick' attribute in the button. Thanks again in advance, here is my code:
<div class="instructions-button">
<button
type="button"
class="halo-modal-action-button external-instructions"
onClick="window.open('https://mysite/foo');"
window="new"
ng-disabled=""
ng-click=""
data-bs-enabled=""
>Instructions</button>
</div>
I am trying to make a simple conditional to show either:
'mysite/foo || mysite/bar'
but am not sure how to make it work.
Don't use onClick event on the button, although it might feel weird to you, since you are coming from vanilla JS, you should use ng-click.
<button
class="halo-modal-action-button external-instructions"
ng-disabled=""
ng-click="openWindow()"
data-bs-enabled=""
>Instructions</button>
and inside controller
$scope.openWindow = function(){
if ( condition ) {
open('http:foo.bar')
} else {
open('http:bar.foo')
}
}
Two simple ways to do this.
1) Two buttons and show one conditionally with ng-show.
<button ... ng-show="conditionShowFooTrue" >
<button ... ng-show="conditionShowBarTrue" >
2) Use ng-click to call a scope function to conditionally sets the url as the other answers have suggested.
If you're using routes, you can just use ng-click like #Akxe said, and with the $location service in your controller, do:
$scope.changeLocation = function(){
if(condition)
{
$location.path('/foo');
} else
{
$location.path('/bar');
}
};
I think that would be the Angular way to do this.
I have a simple boolean variable that switches a DIV to be hidden at startup and then shown after an action until the end of the application. But it does not switch - the DIV is always hidden. Please help, what is wrong in the code below:
<div class="right" ng-controller="EmployeeDetailsCtrl" ng-show={{showEmployeeDetails}}>
<p>{{employee.name}} {{employee.surname}}</p>
</div>
inside EmployeeDetailsCtrl controller:
$scope.$on('showEmployee', function (event, data) {
$scope.showEmployeeDetails = true;
$scope.employee = data;
});
$scope.showEmployeeDetails = false;
BTW, the $scope.employee variable updates correctly after the event is triggered, so I'm really stuck what's going on here.
Remove the {{}} from your ng-show, like so:
<div class="right" ng-controller="EmployeeDetailsCtrl" ng-show="showEmployeeDetails">
<p>{{employee.name}} {{employee.surname}}</p>
</div>
When you're using ng-show you're binding to an expression, not a string, so just use:
ng-show="showEmployeeDetails". That's why you can do more complex stuff like ng-show="1 + 1 === 2".
If that still doesn't cut it, it could be a scoping issue with primitives being assigned to a child scope and not seen up the parent scope. It doesn't look like it from the code you showed but perhaps it's simplified for this question, you never know.
I ran into a issue where using polymer I would like to toggle through two divs, the problem I have is, I want to use the polymer standard of toggling where they use: hidden?="{{toggleMe}}" as a attribute on the div and just bind it then make a function that would do the toggling or the show/hide that will look like this:
<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>
<a on-tap="{{change}}">Toggle</a>
<script>
Polymer('componentName',{
change: function(){
this.divOne = !this.divOne;
this.divTwo = !this.divTwo;
}
})
</script>
This above will show both and hide both together, I want the one displayed and the other hidden, So essentially switching between the two while starting with the one hidden and the other active, and then swapping states from there.
I tried this also with no luck as I can't do this or use the '!' on the left hand side:
!this.divOne = this.divOne;
this.divTwo = !this.divTwo;
Thanks for reading
this.divOne = !(this.divTwo = this.divOne);
I have found a fix to the question, i assigned true and false values to the bind hidden values before I used them (this assigns a true for hidden state and false for the separate values), Then when clicking on the toggle bind I just used the code of #Zikes to have the toggle work(thanks for that).
current working code
<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>
<a on-tap="{{change}}">Toggle</a>
<script>
Polymer('componentName',{
divOne: false,
divTwo:true,
change: function(){
this.divOne = !(this.divTwo = this.divOne);
}
})
</script>
Hope this can help clear someone in the future
i want to get the text of div using angularjs . I have this code
<div ng-click="update()" id="myform.value">Here </div>
where as my controller is something like this
var myapp= angular.module("myapp",[]);
myapp.controller("HelloController",function($scope,$http){
$scope.myform ={};
function update()
{
// If i have a textbox i can get its value from below alert
alert($scope.myform.value);
}
});
Can anyone also recommand me any good link for angularjs . I dont find angularjs reference as a learning source .
You should send the click event in the function, your html code should be :
<div ng-click="update($event)" id="myform.value">Here </div>
And your update function should have the event parameter which you'll get the div element from and then get the text from the element like this :
function update(event)
{
alert(event.target.innerHTML);
}
i just thought i put together a proper answer for everybody looking into this question later.
Whenever you do have the desire to change dom elements in angular you need to make a step back and think once more what exactly you want to achieve. Chances are you are doing something wring (unless you are in a link function there you should handle exactly that).
So where is the value comming, it should not come from the dom itself, it should be within your controller and brought into the dom with a ng-bind or {{ }} expression like:
<div>{{ likeText }}</div>
In the controller now you can change the text as needed by doing:
$scope.likeText = 'Like';
$scope.update = function() {
$scope.likeText = 'dislike';
}
For angular tutorials there is a good resource here -> http://angular.codeschool.com/
Redefine your function as
$scope.update = function() {
alert($scope.myform.value);
}
A better way to do it would be to use ng-model
https://docs.angularjs.org/api/ng/directive/ngModel
Check the example, these docs can be a bit wordy