I want a DIV behaving like radio button and fetching its value in angularJS. My div looks like :
<div ng-repeat="address in multipleaddress" class="tileHover widget Text span4">
<div class="radios" for="optionsRadios1{{address.id}}" id="{{address.id}}" ng-model="radiosship.shiphere">
<h3 class="widget-title widget-title" id="shipaddr{{address.id}}">Address #{{$index + 1}}</h3>
<span style="font-size:16px">{{address.firstname}} {{address.lastname}}</span>
<p>{{address.shipping_address}}<br/>{{address.shipping_city}},
<span ngif="{{address.country}} == 'CA'">{{address.shipping_province}}</span>
<span ngif="{{address.country}} == 'US'">{{address.shipping_state}}</span>
<span ngif="{{address.shipping_country}} != 'US' && {{address.shipping_country}} != 'CA'">{{address.otherregion}}</span> - {{address.pincode}},<br/> {{address.country}}</p>
<input type="radio" name="shiphere" id="optionsRadios1{{address.id}}" ng-model="radiosship.shiphere" value="{{address.id}}"/>
</div>
when I click on radios div, the radio button in that div should get selected and I want its value in $scope.radiosship.shiphere in angular. Any help?
I think the main issue here is that a DIV element can not use ng-model directive --assuming that you do not use a custom directive for that--.
so replace <div class="radios" for="optionsRadios1{{address.id}}" id="{{address.id}}" ng-model="radiosship.shiphere"> with <div class="radios" for="optionsRadios1{{address.id}}" id="{{address.id}}" ng-click="radiosship.shiphere = address.id; doSomething(address)">
also to bind the model value to the controller $scope rather than the components', you can initialize the radiosship variable in controller like so:
$scope.radiosship = {};
here is a working example
angular.module('App', [])
.controller('MainCtrl', function ($scope) {
$scope.radiosship = {};
$scope.multipleaddress = [
{id: 1, firstname: 'John'},
{id: 2, firstname: 'John'},
{id: 3, firstname: 'John'},
];
});<!DOCTYPE html>
<html ng-app="App">
<head>
<title>Radio</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<pre>{{radiosship | json}}</pre>
<div ng-repeat="address in multipleaddress" class="tileHover widget Text span4">
<div class="radios" for="optionsRadios1{{address.id}}" id="{{address.id}}" ng-click="radiosship.shiphere = address.id; fetchData(address)">
<h3 class="widget-title widget-title" id="shipaddr{{address.id}}">Address #{{$index + 1}}</h3>
<span style="font-size:16px">{{address.firstname}} {{address.lastname}}</span>
<p>{{address.shipping_address}}<br/>{{address.shipping_city}},
<span ng-if="address.country == 'CA'">{{address.shipping_province}}</span>
<span ng-if="address.country == 'US'">{{address.shipping_state}}</span>
<span ng-if="address.shipping_country != 'US' && address.shipping_country != 'CA'">{{address.otherregion}}</span> - {{address.pincode}},<br/> {{address.country}}</p>
<input type="radio" name="shiphere" id="optionsRadios1{{address.id}}" ng-model="radiosship.shiphere" value="{{address.id}}"/>
</div>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments