Question

我希望 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 中的值为angular。有什么帮助吗？

Answer 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而不是组件＆＃39;，您可以在控制器中初始化radiosship变量，如下所示：

$scope.radiosship = {};

这是一个工作示例

＆＃13;

   angular.module('App', [])
   .controller('MainCtrl', function ($scope) {
     $scope.radiosship = {};
     $scope.multipleaddress = [
     {id: 1, firstname: 'John'},
     {id: 2, firstname: 'John'},
     {id: 3, firstname: 'John'},
     ];
   });

＆＃13;

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

＆＃13;

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

1 个答案: