CODEWITHSUNDEEP
javascriptangularjscontrollerscopeangular-ui-router
TonyW
TonyW

Reputation: 18875

AngularJS: use $scope.$watch with controller as syntax

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'
    })

Upvotes: 4

Views: 8158

Answers (2)

rmuller
rmuller

Reputation: 1837

The following works:

$scope.$watch(
  function() { return vm.radioSelection}, 
  function(newVal, oldVal) {
    vm.message = "Your selection is " + newVal;
  }, 
  true
);

Plunkr

Upvotes: 14

Raja Jaganathan
Raja Jaganathan

Reputation: 36117

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;
});

Upvotes: 0

Related Questions