AngularJS重复HTML输入

Question

我知道这将是一个简单的问题，但这是我的第一个有角度的项目

这就是我想要做的

<div class="switch-field">
    <div class="switch-title">Three fields? Sure.</div>
        <input type="radio" id="switch_3_left" name="switch_3" value="yes" checked />
        <label for="switch_3_left">One</label>
        <input type="radio" id="switch_3_center" name="switch_3" value="maybe" />
        <label for="switch_3_center">Two</label>
        <input type="radio" id="switch_3_right" name="switch_3" value="no" />
        <label for="switch_3_right">Three</label>
    </div>
</div>

Fiddle Link

这是我的数据源

这是我的代码

<div class='row' ng-show="mk.selectedTypeAttributesID.length != 0">
    <div class='col-xs-3 col-sm-3 col-md-3 col-lg-3' ng-repeat="att in mk.selectedTypeAttributesID">
        <div class="switch-field">
            <div class="switch-title">{{att.name}}</div>
                <div ng-repeat="val in att.Values" >
                    <input class="bttn-input"  type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" value="{{val.val}}"  />
                    <label class="bttn-input"  for="switch_3_{{val.val}}">{{val.val}}</label>
                </div>
            </div>
        </div>
    </div>
</div>

这是html结果

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 ng-scope" ng-repeat="att in selectedTypeAttributesID">
    <div class="switch-field">
        <div class="switch-title ng-binding">مقاس</div>
            <!-- ngRepeat: val in att.Values -->
            <div ng-repeat="val in att.Values" class="ng-scope">
                <input class="bttn-input" type="radio" id="switch_43" name="switch_7" value="43">
                <label class="bttn-input ng-binding" for="switch_3_43">43</label>
            </div>
            <!-- end ngRepeat: val in att.Values -->
            <div ng-repeat="val in att.Values" class="ng-scope">
                <input class="bttn-input" type="radio" id="switch_41" name="switch_7" value="41">
                <label class="bttn-input ng-binding" for="switch_3_41">41</label>
            </div>
            <!-- end ngRepeat: val in att.Values -->
        </div>
    </div>
</div>

我想要的是 1-输入将在div“ switch-field”下 2-为什么div中的每个输入

谢谢

Answer 1

如评论中所述，ng-repeat-start和ng-repeat-end用于您要重复多个元素而不仅仅是一个元素的情况。这是使用此方法的情况的一个简单示例。与其在<div>上重复，不如在ng-repeat-start上使用<input>，在ng-repeat-end上使用<label>。这将导致<input>和<label>元素的每个集合在<div>内部作为一个单元重复。

angular.module('app', [])
  .controller('ctrl', ($scope) => {
    $scope.att = {
      name: 'SomeAtt',
      id: 'SomeId',
      Values: [{
        val: 1
      }, {
        val: 2
      }, {
        val: 3
      }]
    };
  });

.switch-field {
  font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
  padding: 40px;
  overflow: hidden;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  width: 60px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked+label {
  background-color: #A5DC86;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class='row'>
    <div class='col-xs-3 col-sm-3 col-md-3 col-lg-3'>
      <div class="switch-field">
        <div class="switch-title">{{att.name}}</div>
        <div>
          <input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" value="{{val.val}}" />
          <label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
        </div>
      </div>
    </div>
  </div>
</div>