单选按钮独家垂直和水平

嗨，我试着用单选按钮控制，我有一个单选按钮网格单选按钮独家垂直和水平

所以你只能选择每行和列的一个选项，并检查是否被回答与验证。

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

请任何想法，我应该如何实现在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 = [ 
 
\t { name: 'Paint pots', id: 'B1238' }, 
 
\t { name: '&#12469;&#12452;&#12458;&#12531;&#12490;', id: 'B1233' }, 
 
\t { name: 'Pebbles', id: 'B3123' } 
 
\t ]; 
 

 
    $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> 
 
    
 
    \t <table> 
 
\t <tr ng-repeat="name in surveyNames"> 
 
\t <td><span ng-bind-html="name.name"></span></td> 
 
\t <td>{{name.id}}</td> 
 
\t 
 
    \t <td align="center" ng-repeat = "buttons in radioButonsCounter"> 
 
    \t 
 
    \t <input type=radio name="{{name.id}}" value={{buttons }}>{{buttons }} 
 
    \t 
 
    \t </td> 
 
\t </tr> 
 
\t 
 
\t 
 
\t </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>

来源

2015-01-09 Xvegas

你的意思是说，如果得到所选的选项应该该行或列中不会发生？ – Sanjiv 2015-01-09 21:56:07

你的问题是什么？验证？ – PSL 2015-01-09 22:01:05

是的，我创建了一个函数，听onchage或ngchange，我正打算通过$索引，所以我可以取消选中其他列，所以单选按钮已经互相排斥，现在我想做到垂直排他 – Xvegas 2015-01-09 22:12:36

如果单选按钮的每一行设置为相同的名字，那么浏览器将只允许您选择每行一个，所以只要你将它设置为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

来源

2015-01-10 00:23:19

好吧，我必须使用链接功能在侦听上改变事件指令，然后找到所有同胞单选按钮，然后取消选中所有不属于当前单选按钮的单选按钮我的名字产权垂直排序，以便它们是相互排斥的垂直已经

(function(angular) { 
 
    'use strict'; 
 
    
 
    var ExampleController = ['$scope', function($scope) { 
 
    
 
    $scope.myHTML ='I am an &#12470 string with ' ; 
 
    
 
    $scope.surveyNames = [ 
 
\t { name: 'Paint pots', id: 'B1238' }, 
 
\t { name: '&#12469;&#12452;&#12458;&#12531;&#12490;', id: 'B1233' }, 
 
\t { name: 'Pebbles', id: 'B3123' } 
 
\t ]; 
 

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

来源

2015-01-12 22:41:53 Xvegas

单选按钮独家垂直和水平

回答

相关问题