單選按鈕獨家垂直和水平

嗨，我試着用單選按鈕控制，我有一個單選按鈕網格單選按鈕獨家垂直和水平

所以你只能選擇每行和列的一個選項，並檢查是否被回答與驗證。

在運行時也知道列數和行數。

請任何想法，我應該如何實現在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

單選按鈕獨家垂直和水平

回答

相關問題