Angularjs:单选按钮没有使用ng-repeat,tr,td在一行中对齐

时间:2017-07-04 09:20:28

标签: angularjs radio-button angularjs-ng-repeat

我编写了简单的angularjs代码,它将具有多个单选按钮。我使用ng-repeat,tr,td实现了它。 以下是代码,

system.time(
for (i in 1:3) {
write.xlsx(fulldata[[i]], file="fulltable5.xlsx", sheetName=cntry_name[i])
}
)

代码应显示单个水平线的所有按钮,因为td在tr内。但是所有按钮都显示在新的行/行中。 请帮忙。

1 个答案:

答案 0 :(得分:1)

只需将ng-repeat移动到TD标签即可。由于你有TR标签,它也会不断重复TR。

<html ng-app="plunker">
   <head>
      <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
   </head>
   <body ng-controller="MainCtrl">
      <table>
         <tr>
            <td ng-repeat="subscription in entities">
               <input type="radio" ng-model="subscription.checked" ng-value="true" ng-click="updateSelection($index, entities)" />{{subscription.name}}
            </td>
         </tr>
      </table>
   </body>
   <script>
      var app = angular.module('plunker', []);

      app.controller('MainCtrl', function($scope, $http, $location, $window) {
          $scope.entities = [{
                  name: 'Last Week',
                  id: 1,
                  checked: false
              }, {
                  name: 'Last Month',
                  id: 2,
                  checked: false
              }, {
                  name: 'Last year',
                  id: 3,
                  checked: false
              },
              {
                  name: 'Last 3 months',
                  id: 4,
                  checked: false
              },
              {
                  name: 'Last 6 months',
                  id: 5,
                  checked: false
              },
              {
                  name: 'Last 9 months',
                  id: 6,
                  checked: false
              }
          ]
          $scope.updateSelection = function(position, entities) {
              angular.forEach(entities, function(subscription, index) {
                  if (position != index)
                      subscription.checked = false;
                  else {
                      console.log(subscription.id);
                      $window.location.href = "/view_report/?q=" + subscription.id;
                  }
              });
          };

      });
   </script>

另外,找到代码的plunker链接:
https://plnkr.co/edit/tiLFg8r8Xk8aR65aNcG9?p=preview