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