Question

这是我一直处理的问题。

现在不要担心盘子，方向或槽是什么。我将尝试解释这里的主要问题。

选择容器后，将调用API以获取该特定容器的所有插槽。返回包含所有slots

的数组

要添加其他字段，请使用此简单代码

            $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
            });
        };

要删除行，请使用此行。

    /**
     * Remove fields by clikcing the trash button
     * @return fields - scope
     */
    $scope.removeFormField = function() {
        var lastItem = $scope.fields.length - 1;
        $scope.fields.splice(lastItem);
    };

这很好用。我就像这样重复html中的字段。

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

..它只是有效。

问题。

我在这里想要实现的是当用户选择一个插槽时，在这种情况下可以说插槽1。当添加另一行时，我想禁用先前选择的插槽（即1）并仅显示可供选择的插槽（2,3,4..etc）

我一直在挖掘并发现了一些例子，例如one和one，但我不确定如何将这些方法应用到我的中。

我还在selected数组中添加了slots键，就像这样。

                        angular.forEach(slots, function (slot) {
                      $scope.masterListOfSlots.push({
                          slot: slot,
                          selected: false,
                      });
                    });

并在html中对其进行了过滤，但又不确定了。

注意：用户必须能够取消选择并在插槽之间进行选择。

有人会告诉我一个解决这个问题的正确方法。谢谢！

Angularjs：选择后禁用所选项目

0 个答案: