md-select angular js updates multiple values

Question

This is my code and i am trying to select different values for floors and shifts based on the date.

<div class="card whiteBckg" ng-repeat="(key, value) in requestsObj" ng-if="true">
<div class="cardHeaderDiv">
    <h4>{{key}} <span>X</span></h4>
</div>
<div class="cardBodyDiv" ng-repeat="(k, v) in value">
    <md-select ng-model="v.shift" placeholder="Select Shift" required md-no-asterisk="false">
        <md-option ng-value="tm.shiftid" ng-repeat="tm in shifts">{{ tm.shift }}</md-option>
    </md-select>

    <md-select ng-model="v.floor" placeholder="Select Floor" required md-no-asterisk="false">
        <md-option ng-value="fl.id" ng-repeat="fl in floors">{{ fl.floor }}</md-option>
    </md-select>

    <div ng-repeat="(a, b) in v.type" class="chip">
        <i class="fa fa-clock-o"></i>{{ getTotal(key, k, a) }}  {{a}}
    </div>
</div>

<div class="cardFooterDiv">
    <h4>Add more shifts for this day</h4>
</div>
</div>

$scope.shifts = [{shiftid: "a", shift: "A"}, {shiftid: "c", shift: "C"}, {shiftid: "b", shift: "B"}];

$scope.floors = [{id: "f1", floor: "F1"}, {id: "f2", floor: "F2"}, {id: "f3", floor: "F3"}];

[{ "shift": null, "floor": null, "type": typeObj },{ "shift": null, "floor": null, "type": typeObj },{ "shift": null, "floor": null, "type": typeObj }];

When i have multiple cards and i choose one of the shifts then all of the shifts get updated to the same value.enter image description here

I attached an image can anyone please help!!!!! Thank You.

Answer 1

I removed the repeat from this line <div class="cardBodyDiv" ng-repeat="(k, v) in value"> in your template, set type: typeObj to type: {} for testing, and created these variables in the $onInit method of the controller. It works for me.

controller

this.shifts = [{shiftid: 'a', shift: 'A'}, {shiftid: 'b', shift: 'B'}, {shiftid: 'c', shift: 'C'}];
this.floors = [{id: 'f1', floor: 'F1'}, {id: 'f2', floor: 'F2'}, {id: 'f3', floor: 'F3'}];
this.requestsObj = [{ shift: null, floor: null, type: {} }, { shift: null, floor: null, type: {} }, { shift: null, floor: null, type: {} }];

template

<div class="card whiteBckg" ng-repeat="(key, value) in $ctrl.requestsObj"  ng-if="true">
  <div class="cardHeaderDiv">
    <h4>{{key}}
      <span>X</span>
    </h4>
  </div>
  <div class="cardBodyDiv">
    <md-select ng-model="value.shift" placeholder="Select Shift" required md-no-asterisk="false">
      <md-option ng-value="tm.shiftid" ng-repeat="tm in $ctrl.shifts">{{ tm.shift }}</md-option>
    </md-select>

    <md-select ng-model="value.floor" placeholder="Select Floor" required md-no-asterisk="false">
      <md-option ng-value="fl.id" ng-repeat="fl in $ctrl.floors">{{ fl.floor }}</md-option>
    </md-select>

    <div ng-repeat="(a, b) in value.type" class="chip">
      <i class="fa fa-clock-o"></i>{{ getTotal(key, k, a) }} {{a}}
    </div>
  </div>

  <div class="cardFooterDiv">
    <h4>Add more shifts for this day</h4>
  </div>
</div>

screen shot