[AngularJS]选择单选按钮上单击父 div 和获取其值在 angularJS

发布时间: 2017/4/16 21:12:03
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要一个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>

当我点击收音机div,应选择该 div 中的单选按钮,我想在$scope.radiosship.shiphere在角中的价值。 任何帮助吗?

解决方法 1:

我认为这里的主要问题是一个 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 控制器中的变量就像这样︰

$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>

赞助商