单击父div时选择单选按钮,并在angularJS中获取其值

阿斯米塔

我想要一个像单选按钮一样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这里以角度表示。有什么帮助吗?

穆罕默德·赛义德(Mohamed El-Sayed)

我认为这里的主要问题是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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Angular中单击父元素时更新单选按钮选择

在单击单选按钮上,将值追加到div并在单击另一个单选按钮时从div中删除

单击按钮时获取div中的值

在jQuery / javascript中单击div时更改单选按钮的值

单击按钮时获取单选按钮值不起作用angularjs

Slack API-单击按钮时从同一消息中获取其他组件的值

Jquery传递通过单击按钮时选择的单选按钮值

选择后隐藏单选按钮并在新 div 中显示选定的值

选择下拉列表并单击单选按钮时显示div

在Angular JS中单击提交后如何获取单选按钮中选择的值列表

显示一个div并在单击angularjs中的按钮时隐藏其他div

无法在单击按钮时捕获表中的单选按钮值

如何通过单击表中的单选按钮随机选择动态值 - 无法单击单选按钮

单击单选按钮时,jQuery查找DIV内部值

单击按钮获取父div

单击div中的按钮时防止单击父项

从所有行中获取单击的单选按钮值

在jQuery中动态选择时如何获取单选按钮的名称和值?

在React中单击单选按钮时如何显示div

在angularjs切换操作中单击按钮时选择和取消选择div

单击图像时选择单选按钮

单击标签链接时选择单选按钮

jQuery:在单选按钮中单击“是”时,如何在下拉菜单中设置特定的值选择

在选择单选按钮时,div不显示在html中

通过单击提交获取单选按钮的值

如何在AngularJS中获取所选单选按钮的值

按钮单击获取每个函数中父级的文本值

单击单选按钮时显示多个div

单击单选按钮时输入值的计算