Question

您好我有一个html文件和一个AngularJS文件（Bootstrap ui）。每当我点击添加按钮时，它应该帮助我创建一个新的td（输入字段）和3个相应的单选按钮。以下是我的代码，但不知道如何实现它。我试图用tr替换div而td都不起作用。

HTML：

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="static/js/app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
  <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
  </body>
</html>

和JS文件：

angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };

请有人帮忙。提前谢谢。

Answer 1

AngularJs的基本方法是：

模板生成的HTML，由数据模型中的值驱动
如果你想动态地使用自定义指令而不是jQuery 操纵DOM。

在您的情况下，一个简单的ng-repeat循环应该足够了，为数据模型中的集合/数组的每个元素生成一个td和三个输入。单击该按钮时，应更新集合中的元素数。如有必要，您可以使用$ apply强制进行UI更新。

类似的东西：

   <tr ng-repeat="cell in cells">
     <td>
       <label><input type="radio" ng-model="cell.value1" value="1">1</label<br/>
       <label><input type="radio" ng-model="cell.value2" value="2">2</label<br/>
       <label><input type="radio" ng-model="cell.value3" value="3">3</label<br/>
     </td>
   </tr>

如何使用AngularJS添加动态输入字段和相应的无线电

1 个答案: