Angularjs Repeat html input

Question

I know this will be an easy Question but this is my first angular project

this it what i,m trying to do

<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

this is my Datasource

this is my Code

<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>

this is the html result

<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>

what i want is 1-that the inputs will be under the div "switch-field" 2- why every input in a div

thanks all

You must change your ng-repeat to the div under the actual. And I didn't get your second question. Could you explain it better? — Luiz Carlos
– Luiz Carlos, Commented Aug 2, 2018 at 12:35
the second question if you noticed in the html Result the div ng-repeat="val in att.Values" is repeated for each value it should be one with 2 inputs inside — Maher Khalil
– Maher Khalil, Commented Aug 2, 2018 at 12:45
when you put ng-repeat on a div element, the entire contents of that div including the div with ng-repeat are copied. If you only want to repeat input and not the div, you need to look at ng-repeat-start and ng-repeat-end placing start on the first element and end on the 2nd element. This isn't the ideal solution; but should help you move on. — Axar
– Axar, Commented Aug 2, 2018 at 13:31
i didn't understand how ng-repeat-start will solve that could you give example i need one div and repeat the inputs — Maher Khalil
– Maher Khalil, Commented Aug 2, 2018 at 13:46
Use <ng-container> for your repeat. Or you could do it with CSS: .switch-title > div { display: contents } — leonsaysHi
– leonsaysHi, Commented Aug 2, 2018 at 14:45

Lex · Accepted Answer · 2018-08-02 15:15:39Z

As mentioned in a comment, ng-repeat-start and ng-repeat-end are used in situations where you want to repeat more than just a single element. Here is a simple example for your situation using this approach. Rather than repeating on the <div>, use ng-repeat-start on the <input> and ng-repeat-end on the <label>. This will cause each set of <input> and <label> elements to be repeated as a single unit inside the <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>

Collectives™ on Stack Overflow

Angularjs Repeat html input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related