I'm playing around with Angular and trying to see if the above is possible.
<div ng-controller="Ctrl">
<input ng-model="name">
<h1>{{name}}</h1>
<h1>{{age}}</h1>
</div>
var Ctrl = function($scope) {
$scope.name = "Kevin"
$scope.age = "26"
$scope.$watch('name', function() {
if($scope.name = 'Bob') {
$scope.age = '101';
};
});
};
However, doing this just sets the value of name to "Bob" instead of "Kevin".
What am I doing wrong?
Try to use == instead of = in this line: if($scope.name = 'Bob') {
:)
here is what you are looking for try this plunker
$scope.$watch('name', function(newval,old) {
// alert(old + newval)
if (newval == 'Kevin') {
$scope.age = 99;
} else if (newval == 'Bob') {
$scope.age = 101;
}
})
Try changing the input value from Kevin to Bob and vice versa for change
Callback inside watch function should take parameter like this:
$scope.$watch('name', function(newName) {
if (newName == 'Kevin') {
$scope.age = 99;
} else if (newName == 'Bob') {
$scope.age = 101;
}
})
Here's plunker: http://plnkr.co/edit/kTOXrSfRTXE7HCUsZfh2?p=preview
Changing $scope.name between 'Bob' and 'Kevin' affects $scope.age
Related
I have a service which returns reponse. In response I have count of Users. I have a var userCount and I have a watch() on this userCount var.
var userCount=null;
var eventPromise = userSer.load(query, deviceType,$scope.duration);
eventPromise.then(function(response) {
console.log(response)
var dataLength = response.users.length;
$scope.numberOfRecords = dataLength;
if(dataLength > 0){
userCount = response.beaconCount;
setUserCount(userCount);
}
var setUserCount=function(data){
userCount=data;
};
var getUserCount=function(){
return userCount;
}
// This $watch function is not getting trigger as we are changing value of userCount from null to response.userCount.
$scope.$watch(userCount, function(newVal){
alert("M in watch func");
$scope.gridOptions.columnDefs[0].displayName = 'Beacon(' + getUserCount() + ')';
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
})
You have messed up the usage of $scope.$watch, the correct usage of $scope.$watch is as below, refer docs here:
Usage1: watching changes of variable belongs to $scope.
$scope.userCount = null;
$scope.$watch("userCount", function() { ... });
Usage2: watching changes of variable not belongs to $scope.
var userCount = null;
$scope.$watch(function() { return userCount; }, function() { ... });
refer the below example.
angular.module("app", [])
.controller("myCtrl", function($scope, $timeout) {
$scope.data = null;
var data2 = null;
$scope.$watch("data", function() {
console.log("data change detected.");
});
$scope.$watch(function() { return data2; }, function() {
console.log("data2 change detected.");
});
$timeout(function() {
$scope.data = {id: 1};
data2 = {id: 2};
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
</div>
You cannot $watch any variable like this. Assign the userCount variable to $scope and it will work.
$scope.userCount = null;
userSer.load(query, deviceType, $scope.duration).then(function (response) {
console.log(response);
var dataLength = response.users.length;
$scope.numberOfRecords = dataLength;
if (dataLength > 0) {
$scope.userCount = response.beaconCount;
}
});
I'm facing a problem in which if I need to enable the save button if at least one check box is selected which is inside ng-repeat.
When I click for the first time it works well but dosen't work for multiple check box clicks.
Below is the working plunker:
Disabling save button
I'm using ng-change to get the selected condition..
$scope.getSelectedState = () => {
var selectedCount = new Array();
for (var i in $scope.selected) {
selectedCount.push($scope.selected[i]);
}
var allTrue = selectedCount.every(function (k) { return k });
if (allTrue) {
$scope.isSelected = false;
} else {
$scope.isSelected = true;
}
}
just change your getSelectedState . see PLUNKER DEMO
like:
$scope.getSelectedState = function() {
$scope.isSelected = true;
angular.forEach($scope.selected, function(key, val) {
if(key) {
$scope.isSelected = false;
}
});
};
and you should use ng-repeat in <tr> tag instead of <body> tag according to your plunker demo.
How about this:
$scope.getSelectedState = () => {
var selectedCount = new Array();
for (var i in $scope.selected) {
selectedCount.push($scope.selected[i]);
}
$scope.isSelected = selectedCount.indexOf(true) !== -1 ? false : true;
}
You fill the array with the checkbox values and then check if that array contains true value with indexOf
Here is my suggestion. Whenever there is any checked item, it will make variable "isAnyTrue = true".
$scope.getSelectedState = () => {
var selectedCount = new Array();
var isAnyTrue = false;
for (var i in $scope.selected) {
if ($scope.selected[i] === true){
isAnyTrue = true;
}
selectedCount.push($scope.selected[i]);
}
var allTrue = selectedCount.every(function (k) { return k });
$scope.isSelected = !isAnyTrue;
}
Here is your updated app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.selected = {};
$scope.outputType = [
{
"id": 1,
"name": "Coal"
},
{
"id": 2,
"name": "Rom"
},
{
"id": 3,
"name": "Waste"
}
];
$scope.months = ["JAN", "FEB"];
$scope.values = [];
$scope.isSelected = true;
$scope.getSelectedState = (id) => {
var selectedCount = 0;
for(var key in $scope.selected){
if($scope.selected[key]){
selectedCount++;
}
}
if(selectedCount!=0){
$scope.isSelected = false;
}else{
$scope.isSelected = true;
}
}
});
Do this:
$scope.isSelected = false;
$scope.getSelectedState = () => {
var atleastOneSelected = false;
for (var i in $scope.selected) {
atleastOneSelected = atleastOneSelected || $scope.selected[i];
}
$scope.isSelected = atleastOneSelected;
}
And have following in html part:
<button type="button" ng-disabled="!isSelected" ng-click="save()">Save</button>
I'm a bit late to the question and I saw everyone already gave you a lot of great tips.
I found something different you may like, that does not involve any controller (Javascript) code.
Here is the HTML for the checkbox :
<label class="checkbox" >
<input type="checkbox" class="form-control"
ng-model="selected[item.id]" ng-init="state = -1" ng-click="state = state * -1;$parent.validFields = $parent.validFields + state;" /><i></i>
</label>
And for the button :
<button type="button" ng-disabled="validFields <= 0" ng-click="save()">Save</button>
Basically the general idea is this one : you have a "validFields" counter that starts at 0 (= no field is activated). The button is displayed if this value is above 0.
Every checkbox has a "state", that is either 1 or -1. Everytime you click on a checkbox, it adds its state to the counter, indicating whether it is ON or OFF, and switches its states. The next time you click you "cancel" the previous value that was added to the validation.
Working Plunker link here : PLUNKER DEMO
Happy coding!
call on ng- change function, (checkbox is in ng-repeat):
<input type="checkbox" name="selected" ng-model="library.isSelected" ng-change="auditCtrl.showButton()"/>
<button class="btn btn-primary" type="button" ng-click="auditCtrl.sendApproval()" ng-disabled="!auditCtrl.showSend">Send</button>
.js
auditCtrl.showButton = function()
{
var arrayCheck = [];
for(var k = 0; k < auditCtrl.libraries.length; k++)
{
if(auditCtrl.libraries[k].isSelected == true)
{
arrayCheck.push(auditCtrl.libraries[k]);
}
}
if(arrayCheck.length > 0)
{
auditCtrl.showSend = true;
}
else
{
auditCtrl.showSend = false;
}
}
Beginner programmer here. In my controller constructor I have:
vm.turnCounter = 0;
vm.turn = getTurn();
function getTurn() {
if (vm.turnCounter % 2 == 0) {
return 'Player 1';
} else {
return 'Player 2';
}
}
vm is my capture variable, I'm not using $scope. I'm trying to display the current turn in my view with {{ctrl.turn}} but so far changes in vm.turnCounter has no effect on {{ctrl.turn}}, it always displays "Player 1". Am I missing some Angular databinding concepts here? Thanks.
Here's the whole controller, I omitted the super long getBoards() because it's just a long array I'll put in firebase:
(function () {
angular
.module('APP')
.controller('TicTacToeCtrl', TicTacToeCtrl);
function TicTacToeCtrl() {
var vm = this;
vm.addPiece = addPiece;
vm.boards = getBoards();
vm.turnCounter = 0; //encapsulate this
vm.turn = 'Player 1';
vm.getTurn = getTurn();
function addPiece(obj) {
if (obj.p1 || obj.p2)
obj.p1 = true;
vm.turnCounter++;
}
function getTurn() {
if (vm.turnCounter % 2 == 0) {
return 'Player 1';
} else {
return 'Player 2';
}
}
}
})();
Here is a simplified answer: http://jsfiddle.net/jd96d6kr/
In order for your view to know what is going on you are going to have to use $scope. That is the whole point of data binding in angular. Change var vm to $scope.vm
<body ng-app="APP">
<div ng-controller="TicTacToeCtrl">
<button ng-click="next()">Next</button>
turn is {{vm.turn}}
</div>
(function()
{
angular
.module('APP',[])
.controller('TicTacToeCtrl', function($scope)
{
$scope.vm = this;
$scope.vm.addPiece = $scope.addPiece;
$scope.vm.turnCounter = 0;
$scope.vm.turn = 'Player 1';
$scope.addPiece = function(obj)
{
if (obj.p1 || obj.p2)
obj.p1 = true;
$scope.vm.turnCounter++;
}
$scope.getTurn = function()
{
console.log($scope.vm.turnCounter);
return ($scope.vm.turnCounter % 2 == 0) ? 'Player 1' : 'Player 2';
}
$scope.next = function()
{
$scope.vm.turnCounter++;
$scope.vm.turn = $scope.getTurn();
}
});
})();
I'm not sure what addPiece() does, so I didn't really do much with that.
I have a service that calls to pop up.
The pop up is contains two drop-down lists.
The user is asked to choose the two drop down lists and press ok to return to the service.
In the next call to the pop up i would like that the pop up will display the previous options that was selected by the user.
Everytime i returns to the pop up the drop down are full but no selection has happened and i can't figure out what i am missing.
The service that calls to the pop up:
app.service('OriginalService', [ '$modal',
function ($modal) {
var that = this;
this.filtersMananger = { // my-ng-models for the two drop-down-lists
firstFilter: "",
secondFilter: ""
};
this.openDialog = function(){
var modalInstance = $modal.open({
templateUrl: 'ModalScreen.html',
controller: 'ModalController',
resolve: {
filtersManagerObject: function () {
return that.filtersMananger;
}
}
});
modalInstance.result.then(function (filtersMananger) {
that.filtersMananger.firstFilter = filtersMananger.selectedFirstFilter;
that.filtersMananger.secondFilter = filtersMananger.selectedSecondFilter;
}, function () {
});
};
}
]);
The pop up html:
<div class="data-filters-container">
<div class="data-filter">
<label for="filter-data-drop-down">FIRST FILTER</label>
<select name="filterDataDropDown" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>
<div class="data-filter col-xs-4">
<label for="filter-data-drop-down">SECOND FILTER</label>
<select name="filterDataDropDown" ng-model="filtersMananger.selectedSecondFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>
</div>
The code :
app.controller('ModalController', ['$scope', '$modalInstance', 'filtersManagerObject',
function ($scope, $modalInstance, filtersManagerObject) {
$scope.filtersMananger = {
selectedFirstFilter : "",
selectedSecondFilter : ""
};
$scope.filterDropDownItems = [
{name: "4h", value: "lastFourHours"},
{name: "24h", value: "lastDay"},
{name: "All", value: "all"}
];
/*
* The function checks if the the values in filters are not "".
* If there are not so we found the selected filter and returns it.
*/
$scope.fillPreviousSelections = function(){
if ($scope.isfiltersManagerObjectNotEmpty()){
$scope.fillSelections();
}
};
$scope.isfiltersManagerObjectNotEmpty = function(){
return (filtersManagerObject.firstFilter !== "" || filtersManagerObject.secondFilter !== "");
};
$scope.fillSelections = function(){
if (filtersManagerObject.firstFilter !== ""){
$scope.findDropDownItem(filtersManagerObject.firstFilter);
}
};
$scope.findDropDownItem = function(filterValue){
var isFound = false;
for (var i = 0; i < $scope.filterDropDownItems.length && !isFound; i++){
var dropDownItem = $scope.filterDropDownItems[i];
if (dropDownItem.value === filterValue){
//////////////////////////////////////////////////////////////
Maybe the problem is here:
$scope.filtersMananger.selectedOneFilter = dropDownItem;
/////////////////////////////////////////////////////////////
isFound = true;
}
}
};
$scope.fillPreviousSelections();
$scope.ok = function () {
$modalInstance.close($scope.filtersMananger);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I found out the problem :)
Look at the select tag:
<select name="filterDataDropDown" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
The ng-model in this case (filtersMananger.selectedFirstFilter) holds the value (filter.value).
So in my function in which i search the proper item from the drop down list named
$scope.findDropDownItem
I need to return the value of the item and not the item itself.
$scope.findDropDownItem = function(filterValue){
var isFound = false;
var dropDownItemToReturn = "";
for (var i = 0; i < $scope.filterDropDownItems.length && !isFound; i++){
var dropDownItem = $scope.filterDropDownItems[i];
if (dropDownItem.value === filterValue){
dropDownItemToReturn = dropDownItem;
isFound = true;
}
}
//my change:
return dropDownItemToReturn.value;
};
After that i assigned the returned value to the model:
var previousDropDownItem = $scope.findDropDownItem(filtersManagerObject.oneFilterFilter);
$scope.filtersMananger.selectedOneFilter = previousDropDownItem ;
And that it!! :)
What is the easiest way to combine ng-changed and ng-blur?
I've found this post: How to let ng-model not update immediately?
However, this does no longer work in angluar 1.2+
Is there any way to achieve the same behavior?
I guess I have to store a copy of the old value myself and compare the new value to that on blur if I try to do the same, or is there any easier way ?
Use ng-model options.
Like this, ng-change will only trigger when the input is blurred.
<input type="text"
ng-model="a.b"
ng-model-options="{updateOn: 'blur'}"
ng-change="onchange()"/>
This does what I want.
It stores the value on focus, and compares it to the new value on blur, if changed, it triggers the expression in the attribute.
app.directive('changeOnBlur', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ngModelCtrl) {
if (attrs.type === 'radio' || attrs.type === 'checkbox')
return;
var expressionToCall = attrs.changeOnBlur;
var oldValue = null;
elm.bind('focus',function() {
scope.$apply(function() {
oldValue = elm.val();
console.log(oldValue);
});
})
elm.bind('blur', function() {
scope.$apply(function() {
var newValue = elm.val();
console.log(newValue);
if (newValue !== oldValue){
scope.$eval(expressionToCall);
}
//alert('changed ' + oldValue);
});
});
}
};
});
usage:
<input ng-model="foo" change-on-blur="someFunc()" />
How about this solution. Works for me:
<input ng-init="oldValue = value" ng-model="value"
ng-blur="oldValue != value && callYourFunc(foo)">
I am using AngularJs 1.2.x and stumbled upon the ng-change issue of firing on each change. ng-blur can be used but it fires even though there is no change in the value. So both cannot be used efficiently.
With Angularjs 1.3.x, things are easier using ng-model-options like below
to invoke change function "onBlur"
ng-change="ctrl.onchange()" ng-model-options="{updateOn: 'blur'}"
And
to delay invocation of change function by 500ms
ng-change="ctrl.onchange()" ng-model-options='{ debounce: 500 }'"
Now coming to back to the question of getting such things with AngularJs 1.2.x
to invoke change function "onBlur"
html
<input type="text" ng-model="ctrl.a.c" sd-change-on-blur="ctrl.onchange()" />
or
<input type="text" ng-model="ctrl.a.c" sd-change-on-blur="ctrl.onchange(ctrl.a.c)" />
JS
app.directive('sdChangeOnBlur', function() {
return {
restrict: 'A',
scope: {
sdChangeOnBlur: '&'
},
link: function(scope, elm, attrs) {
if (attrs.type === 'radio' || attrs.type === 'checkbox')
return;
var parameters = getParameters(attrs.sdChangeOnBlur);
var oldValue = null;
elm.bind('focus', function() {
scope.$apply(function() {
oldValue = elm.val();
});
})
elm.bind('blur', function() {
scope.$apply(function() {
if (elm.val() != oldValue) {
var params = {};
if (parameters && parameters.length > 0) {
for (var n = 0; n < parameters.length; n++) {
params[parameters[n]] = scope.$parent.$eval(parameters[n]);
}
} else {
params = null;
}
if (params == null) {
scope.sdChangeOnBlur();
} else {
scope.sdChangeOnBlur(params)
}
}
});
});
}
};
});
function getParameters(functionStr) {
var paramStr = functionStr.slice(functionStr.indexOf('(') + 1, functionStr.indexOf(')'));
var params;
if (paramStr) {
params = paramStr.split(",");
}
var paramsT = [];
for (var n = 0; params && n < params.length; n++) {
paramsT.push(params[n].trim());
}
return paramsT;
}
to delay invocation of change function by 500ms
html
<input type="text" ng-model="name" sd-change="onChange(name)" sd-change-delay="300"/>
OR
<input type="text" ng-model="name" sd-change="onChange()" sd-change-delay="300"/>
JS
app.directive('sdChange', ['$timeout',
function($timeout) {
return {
restrict: 'A',
scope: {
sdChange: '&',
sdChangeDelay: '#' //optional
},
link: function(scope, elm, attr) {
if (attr.type === 'radio' || attr.type === 'checkbox') {
return;
}
if (!scope.sdChangeDelay) {
scope.sdChangeDelay = 500; //defauld delay
}
var parameters = getParameters(attr.sdChange);
var delayTimer;
elm.bind('keydown keypress', function() {
if (delayTimer !== null) {
$timeout.cancel(delayTimer);
}
delayTimer = $timeout(function() {
var params = {};
if (parameters && parameters.length > 0) {
for (var n = 0; n < parameters.length; n++) {
params[parameters[n]] = scope.$parent.$eval(parameters[n]);
}
} else {
params = null;
}
if (params == null) {
scope.sdChange();
} else {
scope.sdChange(params)
}
delayTimer = null;
}, scope.sdChangeDelay);
scope.$on(
"$destroy",
function(event) {
$timeout.cancel(delayTimer);
console.log("Destroyed");
}
);
});
}
};
}
]);
function getParameters(functionStr) {
var paramStr = functionStr.slice(functionStr.indexOf('(') + 1, functionStr.indexOf(')'));
var params;
if (paramStr) {
params = paramStr.split(",");
}
var paramsT = [];
for (var n = 0; params && n < params.length; n++) {
paramsT.push(params[n].trim());
}
return paramsT;
}
plnkrs for both approaches are
http://plnkr.co/edit/r5t0KwMtNeOhgnaidKhS?p=preview
http://plnkr.co/edit/9PGbYGCDCtB52G8bJkjx?p=info
how about this plunkr?
using angular's built in ng-blur, update your "persisted value" on blur
<input type="text" ng-model="boxValue" ng-blur="doneEditing(boxValue)">
when saving, verify the value is different
$scope.doneEditing = function(v) {
if (v !== $scope.persistedValue) // only save when value is different
$scope.persistedValue=v;
}
There is no special option on ng-blur for pre-checking equality that I'm aware of. A simple if seems to do the trick
Newer versions of AngularJS (now in 1.3 beta) supports this natively. See my answer here
The solution that worked for me was as follows:
<input id="fieldId" type="text"
ng-model="form.fields.thisField"
ng-model-options="{ updateOn: 'blur' }"
ng-change="form.save()" />
I found this solution here
That page says it requires AngularJS version 1.3.0+ . I tested it with AngularJS version 1.5.11 and it works in that version for me.
In app.html
<input type="text" name="name" ng-model="$ctrl.user.name" ng-blur="$ctrl.saveChanges()" ng-change="$ctrl.onFieldChange()"/>
in app.ts
public onFieldChange() {
this.isValuesModified = true;
}
//save changes on blur event
public saveChanges() {
//check if value is modified
if(this.isValuesModified){
//Do your stuff here
}
}
This is how I resolved this.
<input ng-focus="oldValue=value" ng-model="value" ng-blur="oldValue!=value && youFunction()" />