I have a plnkr here that I am testing $scope.$watch on radio buttons with the controller as syntax
. In addition, the radio buttons are embedded inside a parent view container.
In the 'About us' page, I have the following html code for showing two radio buttons along with the current selection message:
<div class="row-fluid">
<div class="well">
<p><strong>Make a selection:</strong></p>
<label>Yes</label>
<input type="radio" name="selection" ng-model="aboutView.radioSelection" value="Yes">
<label>No</label>
<input type="radio" name="selection" ng-model="aboutView.radioSelection" value="No">
<p>{{aboutView.message}}</p>
</div>
I have the following code in the aboutController.js:
(function() {
'use strict';
angular.module('layoutApp')
.controller('aboutController', aboutController);
aboutController.$inject = ['$scope'];
function aboutController($scope) {
var vm = this;
vm.radioSelection = "No"; //default selection
vm.message = "Your selection is " + vm.radioSelection;
/**
* **This does not have any response, not working**
$scope.$watch(vm.radioSelection, function(newVal, oldVal) {
vm.message = newVal;
}, true);
*/
}
}())
Lastly, I have the following block of code in my ui.router config that is relevant to the about us page:
.state('home.about', {
url: '/about',
templateUrl: 'about.html',
controller: 'aboutController as aboutView'
})
The following works:
$scope.$watch(
function() { return vm.radioSelection},
function(newVal, oldVal) {
vm.message = "Your selection is " + newVal;
},
true
);
You can try this one, use 'aboutView' as you set in controller As instead of vm.
$scope.$watch('aboutView.radioSelection', function(newVal, oldVal) {
vm.message = "Your selection is " + newVal;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.