Question

在表单（itemSelectionForm）中，我使用ng-repeat渲染多个表。在每个表格中，我都有单选按钮，其名称后附有索引。现在，我想编写一个角度JS指令（selectAtleastOneItemToReturn），我将放在表单上（使用select-atleast-one-item），它将根据子表单选按钮进行表单验证。现在，我不知道如何在该指令中访问那些子表格单选按钮及其值，以便我可以编写验证代码。并且，如果单选按钮值更改，我想一次又一次地进行验证。如果表单无效，则会禁用下一个按钮。 HTML如下所示。

＆＃13;

<div class="panel-group" data-ng-form="itemSelectionForm" select-atleast-one-item>
  <div class="panel panel-default" data-ng-repeat="item in items">
    <div class="panel">
      <div class="panel-body">       
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>Action</th>
                <th>Item Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <label>
                  <input type="radio" name="inputRadios{{$index}}" value="option 1"  data-ng-model="item.action" required/>
                  </label>
                </td>
                <td>{{item.description}}</td>
              </tr>
              <tr>
                <td>
                  <label>
                  <input type="radio" name="inputRadios{{$index}}" value="option 2" data-ng-model="item.action" required/>
                  </label>
                </td>
                <td colspan="2">Option 2</td>
              </tr>
              <tr>
                <td>
                  <label>
                  <input type="radio" name="inputRadios{{$index}}" value="option 3" data-ng-model="item.action" required/>
                  </label>
                </td>
                <td colspan="2">Option 3</td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>
  </div>
</div>

<div class="right">    
  <button type="submit" class="btn green-button left space-left" data-ng-disabled="itemSelectionForm.$invalid" data-ng-click="goForward()">Next</button>
</div>

＆＃13;

Answer 1

最简单的可能是将表单对象传递给指令，并在您需要的属性上放置$watch，在您的情况下可能是$error - 尽管我不是很清楚关于你想要实现的目标...

JS：

var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope, $log){
    $scope.items = [
        {
            action: 'fooAction',
            description: 'Foo'
        },
        {
            action: 'barAction',
            description: 'Bar'
        }
    ];
});    
app.directive('selectAtleastOneItem', function(){
    return {
        restrict: 'A',
        scope: {
            frm: '=selectAtleastOneItem'
        },
        link: function(scope, element, attrs){
            scope.$watch('frm.$error', function(newVal, oldVal){
                console.log(newVal);
            }, true);
        }
    }
});

HTML：

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div ng-form="itemSelectionForm" select-atleast-one-item="itemSelectionForm">
            <div ng-repeat="item in items">
                {{item.description}}
                <input type="radio" name="inputRadios{{$index}}" ng-model="item.action" required>
            </div>
    </div>
</div>

小提琴：http://jsfiddle.net/dwkmy20j/1/

希望这会让你有所收获。

表单级Angularjs指令，访问所有字段并检查验证

1 个答案: