Here is what I have been dealing with for some time now.
For now don't worry about what a plate , orientation or slot is. I will try to explain the main problem here.
When a container is selected, a call is made to the API to fetch all the slots of that particular container. An array is returned with all the slots
To add another field I use this simple code
$scope.fields = [{
plate_id: "",
orientation_id: "",
slot_id: "",
}];
/**
* Add fields by clicking on the plus button
*/
$scope.addFormField = function() {
var newItemNo = $scope.fields.length + 1;
$scope.fields.push({
plate_id: "",
orientation_id: "",
slot_id: "" + newItemNo
});
};
To delete a row I use this one.
/**
* Remove fields by clikcing the trash button
* @return fields - scope
*/
$scope.removeFormField = function() {
var lastItem = $scope.fields.length - 1;
$scope.fields.splice(lastItem);
};
This works just fine. I ng-repeat the fields in html just like this.
<div class="panel-body">
<div class="form-group form-group-lg" ng-repeat="form in fields" ng-class="{ 'has-error': loadingForm.plate.$invalid, 'has-success': plate }">
<label class="col-sm-2 control-label">Add Plates</label>
<!-- PLATE -->
<div class="col-xs-3">
<ui-select ng-model="form.plate_id" name="plate" ng-disabled="!$select.search.length && !$select.items.length" theme="bootstrap" ng-required="true">
<ui-select-match placeholder="{{$select.disabled ? 'No items available' :'Plate'}}">{{$select.selected.serial_number}}</ui-select-match>
<ui-select-choices repeat="item.id as item in plates | filter: $select.search">
<div ng-bind-html="item.serial_number"></div>
</ui-select-choices>
</ui-select>
</div>
<!-- ORIENTATION -->
<div class="col-sm-3" ng-controller="OrientationsCtrl" ng-class="{ 'has-error': loadingForm.orientation.$invalid }">
<ui-select ng-model="form.orientation_id" name="orientation" ng-disabled="!$select.search.length && !$select.items.length" theme="bootstrap" ng-required="true">
<ui-select-match placeholder="{{$select.disabled ? 'No items available' :'orientation'}}">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item.id as item in allItems | filter: $select.search">
<div ng-bind-html="item.name | highlight: $select.search"></div>
<small ng-bind-html="item.description | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
<div class="col-xs-1" ng-class="{ 'has-error': loadingForm.slot.$invalid }">
<ui-select ng-model="form.slot_id" name="slot" ng-disabled=" ! $select.search.length && !$select.items.length" theme="bootstrap" ng-required="true">
<ui-select-match placeholder="{{$select.disabled ? 'No slots' :'slot'}}">{{$select.selected.slot.slot}}</ui-select-match>
<ui-select-choices repeat="item in freeSlots | filter: {selected: false}">
<div ng-bind-html="item.slot.slot"></div>
</ui-select-choices>
</ui-select>
</div>
<button ng-click="removeFormField()" ng-show="$first -1 " class="btn btn-lg btn-danger">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
</div>
.. and it just works.
The problem.
What I am trying to achieve here is when a user selects a slot lets say slot 1 in this case. When another row is added I want to disable the previously selected slot (which is the 1) and show only the slots which are available for selection (2,3,4..etc)
I have been digging through and found couple of examples such as this one and this one but I am just not sure how to apply those methods into mine.
I also added a selected key to the slots array, just like this.
angular.forEach(slots, function (slot) {
$scope.masterListOfSlots.push({
slot: slot,
selected: false,
});
});
And filtered it in the html, but wasn't sure again.
Note: The user must be able to deselect and select between slots.
Would someone show me a proper way to solve this. Thanks!
