我想要一个像单选按钮一样的DIV,并在angularJS中获取其值。我的div看起来像:
<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>
当我单击radios div时,该div中的单选按钮应该被选中,我希望它的值在$ scope.radiosship.ship这里以角度表示。有什么帮助吗?
我认为这里的主要问题是DIV元素不能使用ng-model指令-假设您没有为此使用自定义指令-。
所以更换<div class="radios" for="optionsRadios1{{address.id}}" id="{{address.id}}" ng-model="radiosship.shiphere">
用<div class="radios" for="optionsRadios1{{address.id}}" id="{{address.id}}" ng-click="radiosship.shiphere = address.id; doSomething(address)">
还可以将模型值绑定到控制器$ scope而不是组件上,而可以radiosship
在controller中初始化变量,如下所示:
$scope.radiosship = {};
这是一个有效的例子
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句