I want to change scope vairable data by below code but it is not working. I am not getting any error but it is not working like expected.
$scope.secondcity1 = false;
$scope.hidecity1 = function() {
alert(secondcity1);
$scope.secondcity1 = false;
$scope.city1 = '';
alert(secondcity1);
}
I am using alert(secondcity1); this to show alert box but it is not showing anything,
<div ng-style="{'display':secondcity1 == false?'none':'block'">
<!-- some codes -->
<button type="button" class="remove" ng-click="hidecity1()">-</button>
</div>
above code is also not working. I am expecting to hide the div but it is not hiding it.
Try this, in AngularJs to access objects you have to use $scope like $scope.object
$scope.secondcity1 = false;
$scope.hidecity1 = function() {
alert($scope.secondcity1);
$scope.secondcity1 = false;
$scope.city1 = '';
alert($scope.secondcity1);
}
Your alert should display the $scope variable, otherwise it will be undefined
Change
From
alert(secondcity1);
To
alert($scope.secondcity1);
Related
I am trying to pass data to an API for the user e-mail subscription status as "Y"/"N".
In the controller code console.log(a.checked) is undefined. But in regular javascript a onclick event for the input element type="checkbox" has the this.checked to respond correspondingly as true or false. Why is it not happening here in AngularJS?
My html code with angular directive ng-click:
<label for="mail_sub">E-mail subscription</label>
<input id="mail_sub" type="checkbox" name=checkbox ng-click="mailsubscription(this)">
Code of the controller:
.controller("registerCtrl", function($scope, $state, userProcess) {
$scope.mailsubscription = function(a) {
console.log(a);
console.log(a.checked); // console output is: "undefined"
signupinfo = {};
if (a.checked) {
signupinfo.u_mail_subscription = 'Y';
} else {
signupinfo.u_mail_subscription = 'N';
}
console.log(signupinfo);
};
/*$scope.registerProcess = function(signupinfo){
console.log(signupinfo);
userProcess.signup(signupinfo).sucess(function(response){
if(response.status){
}
})
};*/
});
There is no checked defined in your scope. You have do to something like this:
$scope.checked = false
$scope.mailsubscription = function () {
$scope.checked = !$scope.checked;
console.log($scope.checked)
};
Or you can use ngModel directive in your template
<input id="mail_sub" type="checkbox" name=checkbox ng-click="mailsubscription(this)" ngModel="checked">
If you go this way you dont need to toggle the variable checked by your self.
I have a div as follows
HTML
<div ng-hide="checkStatus()">Show only if checkstatus is false</div>
Javascript
$scope.data = 23;
$scope.checkStatus() {
if($scope.data === undefined){
return false;
}
else return true;
}
If i execute this, it says data is undefined. Can someone let me know how to pass this variable to the checkStatus() function. Also this 'data' variable is dynamic and can change frequently.
I want the div to keep an eye on this 'data' variable and show or hide depending on its value.
Can someone let me know how to achieve this.
Just use the scope variable directly in the ng-hide expression:
<div ng-hide="data !== undefined">
$scope.data is undefined<br>
</div>
<div ng-show="data === undefined">
Maybe you should do something about that!!
</div>
The ng-hide and ng-show directives evaluates the AngularJS expression every digest cycle and shows or hides the element if the expression is truthy.
The DEMO on JSFiddle.
Change your javascript to:
$scope.data = true;
$scope.checkStatus = function() {
return $scope.data;
}
there are buttons in detail.html file:
<div ng-controller="test.views.detail">
<div data-ng-repeat="item in details" scroll>
<button ng-click="showDetails(item)">The details</button>
in detail.js file
angular.module('test')
.controller('test.views.detail', function($scope) {
$scope.detailsClicked = false;
$scope.showDetails = function(item){
$scope.detailsClicked = true;
}....
in formDetail.html code:
<div ng-controller="test.views.detail">
{{detailsClicked}}
<div ng-if="detailsClicked">...
Initially it shows false for detailsClicked, when I click on button it goes to showDetails function but value of $scope.detailsClicked never get updated! It is straight forward not sure why it doesn't work:(
This is because you're using the same controller at two places and expecting the scope object to be the same which it is not. Everytime you call ng-controller in your markup a new scope object will be created. If you want them to be based off the same data then use a service.
Here is an example
app.controller('test.views.detail', function($scope, detailsClicked) {
$scope.detailsClicked = detailsClicked;
$scope.showDetails = function(item){
$scope.detailsClicked.isClicked = true;
}
});
Create a factory/service which will retain the data, make sure the data is a
app.factory('detailsClicked', function(){
var data = {
isClicked: false
}
return data;
});
I want to replace text in html with a value from a controller
The original text string is image.name, which is the image title
Via a click event from the 'GoToImage' controller, the span should replace the
image.name with newName
Now, it only adds the newName, but doesn't replace the image.name
Markup:
<div data-ng-controller="GoToImage">
<span data-ng-model="newName">
{{image.name}}
{{newName}}
</span>
</div>
the controller:
.controller('GoToImage', function ($scope) {
$scope.newName = {};
$scope.newDescription = {};
$scope.selectedIndex = 0;
$scope.setImage = function(index) {
$scope.selectedIndex = index;
$scope.newName = $scope.series.images[index].name;
$scope.newDescription = $scope.series.images[index].description;
}
});
also, I cannot get rid of the {} signs which show by default before the click event is fired
You could try creating a new property that returns the current value that should be used.
$scope.nameDisplay = image.name
Then later in your code you can update the nameDisplay property to the value of newName and your UI can just bind to {{nameDisplay}}.
I'm building an autocomplete box in AngularJS. The relevant code looks like this
<input type="text" ng-model="tag">
<div ng-show="tag">
<ul>
<li ng-repeat="t in user.tags | filter:{name:tag}">
<a>{{t.name}}</a>
</li>
</ul>
</div>
I'd like to know what is the best way to show the list of suggestions when "tag" has no value (i.e. I want to show all the tags when the user press the down key. No need to mention the keypressing code on the answer).
ng-show works with any expression that results in a bool, so all you need to do is replace "tag" with "tag === ''", or some equivalent if your tag is going to be undefined or null.
If you only want to show when a certain key is pressed I would create another variable which you set to true when the down key is pressed and check for that also, e.g.
$scope.KeyPressed = false;
$scope.Tags = '';
$scope.ShowTags = function () {
return $scope.KeyPressed && $scope.Tags !== '';
};
Then in you div:
<div ng-show="ShowTags()">
See jsfiddle for example
If you need to change any of the variables from within a jquery plugin you may need to use
$scope.$apply()
I came across this question while I was setting up an angular project of my own.
When I did the accepted answer, I found the my browser kept on increase in memory. If you created the angular scope method "ShowTags()", this will continuously get polled. You can verify this by setting a breakpoint in this method, it will continuously keep getting hit. If you check the task manager and show the browser running your website, the memory keeps going up and won't stop.
In my opinion, scope functions should only be used when using event triggers: click event, change event, keypressed are some of the examples.
showing or hiding aren't events, so this is why it gets polled like that.
To fix and provide the same functionality, turn this into a scope variable.
change the html tag from:
<div ng-show="ShowTags()">
to
<div ng-show="ShowTags">
And in your controller:
$scope.KeyPressed = false;
$scope.Tags = '';
then create a watch event on what you want to watch for:
//initialize showtag when page loads
$scope.ShowTags = $scope.KeyPressed && $scope.Tags !== '';
//watch for any new changes on keypressed
$scope.$watch('KeyPressed', function (newValue, oldValue) {
if (newValue && $scope.Tags !== '') {
$scope.ShowTags = true;
} else {
$scope.ShowTags = false;
}
}
//watch for any new changes on keypressed
$scope.$watch('Tags', function (newValue, oldValue) {
if (newValue !== "" && $scope.KeyPressed) {
$scope.ShowTags = true;
} else {
$scope.ShowTags = false;
}
}
Or you can change to a "watchCollection" instead of having multiple watches like:
$watchCollection('[KeyPressed, Tags]', function (newValue) { }
but with this, newValue will be an array, and you'd have to access the specific indexes to get the newValues of whatever variable is being watched on.
like.. newValue[0] is the value of KeyPressed, and newValue[1] is the value of Tags
Or to go along with the accepted answer and minimize the amount of watches:
$scope.TruthyVal= function () {
return $scope.KeyPressed && $scope.Tags !== '';
};
$scope.$watch('TruthyVal', function (newValue, oldValue) {
if (newValue) {
$scope.ShowTags = true;
} else {
$scope.ShowTags = false;
}
}
Which looks at the values of KeyPressed and Tags, and changes the value of TruthyVal. If TruthyVal is changed, then it goes into the watched logic.