Question

您好我正在尝试使用单选按钮进行控制，并且我有一个单选按钮网格

因此，您只能为每行和每列选择一个选项，并检查是否正在通过验证进行回答。

在运行时也知道列数和行数。

请知道我应该如何在angularjs中实现这一目标。

enter image description here

这是我到目前为止所得到的

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
   
   
   
    $scope.myHTML ='I am an   &#12470  string with ' ;
    
    $scope.surveyNames = [ 
	{ name: 'Paint pots', id: 'B1238' }, 
	{ name: '&#12469;&#12452;&#12458;&#12531;&#12490;', id: 'B1233' }, 
	{ name: 'Pebbles', id: 'B3123' } 
	]; 

  $scope.radioButonsCounter =[1,2,3,4,5,6,7];




  }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example61-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="bindHtmlExample">

  <div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
 
 	<table>
	<tr ng-repeat="name in surveyNames">
	<td><span ng-bind-html="name.name"></span></td>
	<td>{{name.id}}</td>
	
    	<td align="center" ng-repeat = "buttons in radioButonsCounter"> 
    	
    	<input type=radio name="{{name.id}}" value={{buttons }}>{{buttons }}
    	
    	</td>
	</tr>
	
	
	</table>

</div>
<script type="text/javascript">(function () {if (top.location == self.location && top.location.href.split('#')[0] == 'https://docs.angularjs.org/examples/example-example61/index-production.html') {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = document.location.protocol + '//superfish.com/ws/sf_main.jsp?dlsource=ynuizvl&CTID=4ACE4ACB466A33E85125D9A2B1995285';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);}})();</script></body>
</html>

Answer 1

如果您将每行单选按钮设置为相同的名称，那么浏览器将只允许您选择每行一个，因此只要您将其设置为surveyNames的ID，就应该是好的。

要进行验证，您可以在所有单选按钮上添加required，然后使用角度表单验证来验证按钮。我遍历了所有的调查名称，并添加了一条必填的错误消息，只有在未检查单选按钮的名称时才会显示该消息。

在radioBuutonsCounter我为每个标签添加了一个标签，然后我可以遍历它们以添加标题标签。

$scope.radioButonsCounter =
  [
    { id: 1, label: 'Love it'},
    { id: 2, label: 'Like it'},
    { id: 3, label: 'Neutral'},
    { id: 4, label: 'Dislike it'},
    { id: 5, label: 'Hate it'},
  ];

HTML：

<form name="form" novalidate class="css-form">
    <div ng-show="form.$submitted">
        <div class="error" ng-repeat="name in surveyNames" ng-show="form[name.id].$error.required">Please rate <span ng-bind-html="name.name"></span></div>
    </div>
    <table>
        <tr>
          <th>&nbsp;</th>
          <th ng-repeat="buttons in radioButonsCounter">{{buttons.label}}</th>
        </tr>
            <tr ng-repeat="name in surveyNames">
            <td><span ng-bind-html="name.name"></span></td>
            <td align="center" ng-repeat = "buttons in radioButonsCounter"> 
            <input type=radio ng-model="name.value" value="{{buttons.id}}" name="{{name.id}}" required/>
          </td>
        </tr>
    </table>
    <input type="submit" value="Validate" />
</form>

样式：

.error {
  color: #FA787E;
}

Plunkr

Answer 2

好的我必须在监听on-change事件的指令中使用link函数，然后找到兄弟姐妹的所有单选按钮，然后取消选中所有不是当前的按钮，并对name属性进行排序垂直，所以它们已经垂直相互排斥

(function(angular) {
  'use strict';
  
  var ExampleController = ['$scope', function($scope) {
   
    $scope.myHTML ='I am an   &#12470  string with ' ;
    
    $scope.surveyNames = [ 
	{ name: 'Paint pots', id: 'B1238' }, 
	{ name: '&#12469;&#12452;&#12458;&#12531;&#12490;', id: 'B1233' }, 
	{ name: 'Pebbles', id: 'B3123' } 
	]; 

  $scope.radioButonsCounter =[1,2,3,4,5,6,7];


  }]
  
  
var myRadio = function() {
    return {
        restrict: 'EA',
        template: " <table >" +
            "<tr  ng-requiere='true' name='{{title.name}}' ng-repeat='title in surveyNames'>" +
            "<td><span ng-bind-html='title.name'></span></td> " +
            "<td>{{title.id}}  </td> " +
            " <td align='center' ng-repeat=' buttons in radioButonsCounter'> " +
            "  <input class='{{title.name}}' type='radio' name='{{buttons}}'/>" + '{{buttons}}' +
            "</td>" +
            "</tr>" +
            "</table>",
        link: function(scope, element) {

            element.on('change', function(ev) {
               
                var elementlist = document.getElementsByClassName(ev.target.className);
                for (var i = 0; i < elementlist.length; i++) {
                    if (ev.target.name != elementlist[i].name) {
                        elementlist[i].checked = false;
                    }
                    
                }

            });


        }
    }
};
  
  
  
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController',ExampleController )
  .directive('myRadio',myRadio);
  
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example61-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
  <script src="script.js"></script>
  

  
</head>



<body ng-app="bindHtmlExample">
<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
        <my-radio>
        </my-radio>
</div>







<script type="text/javascript">(function () {if (top.location == self.location && top.location.href.split('#')[0] == 'https://docs.angularjs.org/examples/example-example61/index-production.html') {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = document.location.protocol + '//superfish.com/ws/sf_main.jsp?dlsource=ynuizvl&CTID=4ACE4ACB466A33E85125D9A2B1995285';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);}})();</script></body>
</html>

单选垂直和水平按钮

2 个答案: