I'd like to edit my checkbox so I get a or an input with type=button instead.
I have for now, properly working :
<label>Afficher</label>
<input type="checkbox" ng-model="isElementVisible">
Simply, with my script-angular.js :
$scope.isElementVisible = false ; //it's working, true when I click on my checkbox.
I haven't been using AngularJS for a looong time cause that's an old project and I don't know how to say to the button that my ng-model needs to change, should I do a function or is there an easier way ?
Thanks in advance to you all :3
You can simply handle it in the html using
ng-click="isElementVisible = !isElementVisible"
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.isElementVisible = false;
}]);
.hlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="isElementVisible = !isElementVisible">Click to toggle isElementVisible</button>
<div ng-class="{'hlight':isElementVisible}">isElementVisible is {{isElementVisible}}</div>
</div>
Related
In this plunk I have a div with a border width that is determined by the value in an input field. I achieve that with ng-style containing a getBorder() function.
My issue is that getBorder() is called twice and sometimes three times, instead of once. Why does this happen and how to fix it?
HTML
Width: <input type="number" ng-model="borderWidth"/>
<br/>
<div style="background-color:orange;height:200px;width:100px"
ng-style="{ 'border': getBorder() }"></div>
JavaScript
var app = angular.module('app', []);
app.controller('ctl', function ($scope) {
$scope.getBorder = function(){
alert('getBorder called');
return $scope.borderWidth + 'px solid black';
};
});
This is because of the digest cycles in AngularJS.
AngularJS registers watchers to observe changes in the scope, and as soon as a change happens, it refreshes the bindings between corresponding views/models using digest cycles. This is the reason why you can see live changes in the data and on the screen.
ngModel is one of the directives which registers a watcher. So, the problem you came across, is not really a problem, because ng-style is trying to get the value using getBorder().
I hope that this solution solved your problem
var app = angular.module('app', []);
app.controller('ctl', function ($scope) {
$scope.borderWidth = 1;
$scope.$watch('borderWidth', function (newVal, oldVal) {
console.log()
if (angular.isDefined(newVal)) {
$scope.styleBorder = newVal + 'px solid black';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
<body>
<div ng-controller="ctl">
Width: <input type="number" ng-model="borderWidth"/>
<br/>
<div
style="background-color:orange;height:200px;width:100px;"
ng-style='{"border": styleBorder}'
></div>
</div>
</body>
</html>
Recently I am learning Angularjs, my code seems not work as expected:
this is my div:
<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="data.name" value=""/>
{{data.count}}
</div>
</div>
my controller is:
<script>
var app = angular.module('myApp',[]);
app.controller('myController', function($scope) {
$scope.data = {
name:"tom",
count = 0
}
$scope.$watch('data', function(oldValue,newValue) {
++$scope.data.count;
},true);
})
</script>
what I expect is when I type something in the <input> box, the {{data.count}} will increase by 1 each time. However the code is initially 11 and each time I make changes in the input field, the count is increased by 11, can someone help me find where have I done wrong? Thanks a lot in advance.
Why this happen?
Watcher calls multiple times because you created watcher for full object data. Flag true will create sub-watcher for every value in object.
Its a proper behavior. I believe you want something like:
$scope.$watch('data', function(oldValue,newValue) {
if(oldValue.name != newValue.name){
++$scope.data.count;
}
},true);
Demo Fiddle
The second solution is to watch on name only:
$scope.$watch(function(){
return $scope.data.name
}, function(oldValue,newValue) {
++$scope.data.count;
});
Here is a another way to do it. Use the ng-keydown directive and update the count only when a key is pressed inside the input element.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.data = {
name: "tom",
count: 0
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app='myApp'>
<input type="text" ng-model="data.name" value="" ng-keydown="data.count = data.count+1" /> {{data.count}}
</div>
I have following code:
<div class="input-field col s3" ng-repeat="data in content.data">
<input class="updatable mcq"
ng-disabled="!viewMode"
type="checkbox"
id="mcq{{data.surveyPropertyId}}"
ng-click="updateMCQ(data.surveyPropertyId,data)"
ng-model="data.value"/>
<label for="mcq{{data.surveyPropertyId}}">{{data.name}}{{data.value}}</label>
$scope.updateMCQ = function(surveyPropertyId,newValue){
console.log(newValue);
}
problem is that it in updateMCQ function it shows right value of data.value
but if i trigger a click event on this input element it shows previously selected value. for example if checkbox is checked it would send false.
Also {{data.name}}{{data.value}} is evaluating and changing correctly as check / uncheck this element
What can be the problem
UPDATE:
I have found the problem and its a silly one. when I call $('.updatable.mcq.ng-dirty').trigger('click') or for change, it actually changes and now the element value has been changed.!!!.
Now can anyone guide me on how to create a custom directive which would act like an event same as click or change in angularjs?
You should use ng-change like:
ng-change="updateMCQ(data.surveyPropertyId,data)"
You can use ng-change and it will work for you as said by #Jenny.
Here is the code,
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="input-field col s3" ng-repeat="data in content">
<input type="checkbox" ng-model="data.value" ng-change="updateMCQ('data.surveyPropertyId',data)"> click and check console
{{data}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.content =[{ value: false },{ value: false },{ value: true }]
$scope.updateMCQ = function(surveyPropertyId,newValue){
console.log(newValue);
}
});
</script>
</body>
</html>
Please run the above code.
Check this demo
I have found the problem and its a silly one. when I call $('.updatable.mcq.ng-dirty').trigger('click') or for change, it actually changes and now the element value has been changed.!!!.
The problem, I have is AngularJS application is not updating the result when input changes in the input HTML field. If I turn this to auto bootstrapping it does work as expected. I do not know what am i doing wrong?
This is JS file.
angular.module('doublevalue', [])
.controller('DoubleController', ['$scope', function($scope){
$scope.value = 0;
$scope.double = function(value) { $scope.value = value * 2; }
}]);
angular.element(document).ready(function() {
var div3 = document.getElementById('App3');
angular.bootstrap(div3, ['doublevalue']);
});
JSFIDDLE version:
https://jsfiddle.net/as0nyre3/48/
HTML file:
<div id ='App3' ng-controller='DoubleController'>
Two controller equals
<input ng-model='num' ng-change='double(num)'>
<span> {{ value }}</span> </div>
Auto bootstrapping one link:
https://jsfiddle.net/as0nyre3/40/
Please help me!
This is working, with a problem like that you should always check your selectors
<div id="App3" ng-controller="myCtrl">
<input type='text' ng-model='name' ng-change='change()'>
<br/> <span>changed {{counter}} times </span>
</div>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('App3'), ['myApp']);
})
</script>
I have the following HTML
<html ng-app="processBeautifierApp">
...
<body ng-controller="PBCtrl" style="padding: 20px;">
<div id="header">
<div style="padding: 7px; float: right;">
<select ng-model="selectedProcess" ng-options="prozess as prozess for prozess in prozessListe"></select><br/>
<button type="button" ng-click="forceRefresh()">Force DCTM Refresh</button>
</div>
</div>
...
</body>
The corresponding javascript
var processBeautifierApp = angular.module('processBeautifierApp', []);
processBeautifierApp.controller('PBCtrl', function ($scope, $http, $interval, $window){
...
$scope.forceRefresh = function() {
...
}
});
The select element and the button are showing correctly. The options have been populated from the mode, $scope.selectedProcess changes when the user selects a different option.
But: The ng-click of the button doesn't react. $scope.forceRefresh() will never be called. There is no error on the console ... it just doesn't react at all. Can you see why?
Check the working example of your code plnkr.co
var processBeautifierApp = angular.module('processBeautifierApp', []);
processBeautifierApp.controller('PBCtrl', function ($scope, $http, $interval, $window){
$scope.forceRefresh = function() {
alert("asd");
}
});
Ok the solution was as simple as possible ... I am really ashamed
I used $scope.forceRefresh as the name of the function, but I also used $scope.forceRefresh somewhere else in the code as a boolean flag to enable/disable force refresh. Renaming the function did the trick