angularjsangular-ngmodelangularjs-ng-value

ng-model not working for angular radio buttons with JSON object as values


I have a simple filter where I want to select a particular value and type and make other calls using that. Here is a close representation of what I have in my view (I am not using ng-repeat to create these radio buttons).

<form>
<label>
    <input type="radio" name="ptf" ng-value="cntrl.filter.today_filter" ng-model="cntrl.filter.filter_value"> Today
</label>
<label>
    <input type="radio" name="ptf" ng-value="cntrl.filter.hour_filter" ng-model="cntrl.filter.filter_value"> Last 
</label>
    <select ng-model="cntrl.filter.hours" ng-options="num for num in cntrl.filter.time_range"></select>
<label> hours</label>
<label>
    <input type="radio" name="ptf" ng-value="cntrl.filter.date_filter" datepicker="" ng-model="cntrl.filter.filter_value">Select a Date
</label>
<button class="btn btn-info float-right" ng-click = "cntrl.refreshData()" >Update</button>
</form>

This basically gives me 3 options where I can select either today, or last n hours or another date. Here is the relevant code from my cntrl.

vm.filter = {
        today_filter: {
            type: 'today',
            value: 1
        },
        date_filter: {
            type: 'date',
            value: 2
        },
        hour_filter: {
            type: 'hours',
            value: 3
        },
        hours: 8,
        today: getFormattedDate(vm.current_date),
        time_range: [],
        filter_value: {
            type: 'today',
            value: 1
        }
    };

Now I have filter_value (ng-model) set as an object with type today and value 1. So I am expecting that by default my radio button with value of cntrl.filter.today_filter should be selected. And as I select other radio buttons, the filter_value object should update accordingly. Of course this is not happening. Is there some basic thing that is wrong here? Any pointers on how to fix this or maybe a different approach on this?


Solution

  • There are a few things wrong with your code:

    1. You use the wrong aliasses for your controller in your view (spDashboardCntrl and cntrl)
    2. Use the actual same object as the initial value instead of a new object that just looks the same.

    For clarity, see the working example below.

    angular.module('app',[])
    .controller('myController', function() {
      var vm = this;
      
      vm.filter = {
            today_filter: {
                type: 'today',
                value: 1
            },
            date_filter: {
                type: 'date',
                value: 2
            },
            hour_filter: {
                type: 'hours',
                value: 3
            },
            hours: 8,
            today: '', //getFormattedDate(vm.current_date),
            time_range: []
        };
     vm.filter.filter_value = vm.filter.today_filter;
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <div ng-app="app">
      <div ng-controller="myController as vm">
        <form>
          <label>
            <input type="radio" name="ptf" ng-value="vm.filter.today_filter" ng-model="vm.filter.filter_value">Today
          </label>
          <label>
            <input type="radio" name="ptf" ng-value="vm.filter.hour_filter" ng-model="vm.filter.filter_value">Last
          </label>
          <select ng-model="vm.filter.hours" ng-options="num for num in vm.filter.time_range"></select>
          <label>hours</label>
          <label>
            <input type="radio" name="ptf" ng-value="vm.filter.date_filter" datepicker="" ng-model="vm.filter.filter_value">Select a Date
          </label>
          <button class="btn btn-info float-right" ng-click="vm.refreshData()">Update</button>
        </form>
        
        {{vm.filter.filter_value}}
      </div>
    </div>