handle radio in ngRepeat

by ptitgraig

HTML

<script src="https://github.com/rockabox/ng-lodash/blob/master/build/ng-lodash.min.js"></script>
<table style="border:1px solid #000" ng-controller="MyAppController as vm">
  <tr>
    <td style="border:1px solid #ccc"></td>
    <td style="border:1px solid #ccc">from edd</td>
    <td style="border:1px solid #ccc">from diligense</td>
  </tr>
  <tr ng-repeat="se in vm.allSe track by $index">
    <td style="border:1px solid #ccc">{{se.domainName}}</td>
    <td style="border:1px solid #ccc">
      <input type="radio"
             name="radioValue_{{se.domainCode}}"
             ng-model="vm.radioValue[se.domainCode]"
             id="radio_{{se.domainCode}}_fromEdd"
             ng-value="vm.fromEdd"
             ng-click="vm.updateSe(se.domainCode, $index);"
             ng-disabled="se.grey"
             />
    </td>
    <td style="border:1px solid #ccc">
      <input type="radio"
             name="radioValue_{{se.domainCode}}"
             ng-model="vm.radioValue[se.domainCode]"
             id="radio_{{se.domainCode}}_fromDiligense"
             ng-value="vm.fromDiligense"
             ng-click="vm.updateSe(se.domainCode, $index);"
             ng-disabled="se.grey"
             />
    </td>
  </tr>
</table>
<pre>
	{{vm.allSe}}
</pre>

JavaScript

var myApp = angular.module('myApp',['ng-lodash']);

  angular.module('myApp')
		.controller('Controller', ['lodash', MyAppController]);

	//MyAppController.$inject = ['lodash'];
	function MyAppController(lodash) {
		var vm = this;
    
    vm.allSe = [{
    	domainName: 'DADA',
      domainCode: 'D',
      fromDiligense: true,
      fromEdd: false,
      grey: false
    },{
    	domainName: 'HIHI',
      domainCode: 'H',
      fromDiligense: true,
      fromEdd: false,
      grey: false
    },{
    	domainName: 'POPO',
      domainCode: 'P',
      fromDiligense: true,
      fromEdd: false,
      grey: true
    }];
    
    // ng-model=vm.radioValue
		vm.radioValue = [];
    
    // default values for edd and diligense
		vm.fromEdd = {
			fromEdd: true,
			fromDiligense: false
		};
		vm.fromDiligense = {
			fromEdd: false,
			fromDiligense: true
		}
    
		activate();
    
		vm.updateSe = function(seDomainCode, idx){
			var lookedUpSe = lodash.find(vm.allSe, {domainCode: seDomainCode});
			var newSe = angular.extend(lookedUpSe, vm.radioValue[seDomainCode]);
			vm.allSe[idx] = newSe;
		};

		vm.fromDiligenseArr = [];
		vm.fromEddArr = [];

		function activate() {
			termsService.getSe()
				.then(success)
				.catch(failure);

			function success(data) {
				vm.allSe = data.allSe;
				// initialiser tout à diligense
				lodash.forEach(vm.allSe, function(se) {
					vm.radioValue[se.domainCode] = vm.fromDiligense;
					vm.radioValue[se.domainCode] = vm.fromDiligense;
				});
			}

			function failure(err) {
      	//.. erreur
			}
	}
}