0

No matter what I select, this function only returns the first item of the list. As requested, I have included the complete JS code. I have looked through this code four hours and everything seems right to me. This is my first contact with Angular and any help will be greatly appreciated! Thank you!

HTML

<div class="form-horizontal input-append">
    <select name="selectedSharedTenantId"  data-ng-model="selectedSharedTenantId">
        <option data-ng-repeat="item in getFilteredTenants()" value="{{item.id}}">{{item.displayName}}</option>
    </select>
    <button type="button" class="btn" ng-click="addSharedTenant();">
        <i class="fas fa-plus"></i>
    </button>
</div>

JS

$scope.addSharedTenant = function () {
    alert($scope.selectedSharedTenantId)
}

COMPLETE JS CODE

angular.module('directives.datasetEditor', [
    'services.dataset',
    'ui.bootstrap'
])

.directive('datasetEditor', ['$modal', 'DatasetServices', function ($modal, DatasetServices) {
    return {
        restrict: 'A',
        scope: {
            tenantId: '=',
            tenants: '=',
            originalModel: '=model',
            callback: '&callback'
        },
        link: function(scope, element, attrs) {
            scope.model = scope.originalModel ? angular.copy(scope.originalModel) : {
                entryType: 'Activity',
                displayName: ''
            };

            var ModalInstanceCtrl = ['$scope', '$modalInstance',
                function($scope, $modalInstance) {
                    var setSelectedSharedTenantId = function () {
                        var selectedTenant = $scope.getFilteredTenants()[0];
                        $scope.selectedSharedTenantId = selectedTenant ? selectedTenant.id : null;
                    };

                    $scope.getFilteredTenants = function () {
                        return _.filter($scope.tenants, function (o) {
                            alert(o.id)
                            return _.indexOf($scope.model.sharedTenantIds, o.id) == -1 && o.id != $scope.tenantId;
                        });
                    };

                    $scope.getTenantById = function (id) {
                        return _.findWhere($scope.tenants, {
                            id: id
                        });
                    };


                    $scope.removedSharedTenant = function (id) {
                        $scope.model.sharedTenantIds = _.without($scope.model.sharedTenantIds, id);
                        var selectedTenant = $scope.getFilteredTenants()[0];
                        setSelectedSharedTenantId();
                    };

                    $scope.addSharedTenant = function () {
                        //alert($scope.selectedSharedTenantId)
                        //alert($scope.model.sharedTenantIds)
                        if ($scope.selectedSharedTenantId) {
                            if ($scope.model.sharedTenantIds == null) {
                                $scope.model.sharedTenantIds = [];
                            }
                            $scope.model.sharedTenantIds.push($scope.selectedSharedTenantId);
                            setSelectedSharedTenantId();
                        }
                    };

                    $scope.submit = function(isValid) {
                        if (isValid) {
                            DatasetServices.save($scope.model).success(function(data, status, headers, config) {
                                $modalInstance.close(data);
                            });
                        } else {
                            $scope.submitted = true;
                        }
                    };

                    $scope.cancel = function() {
                        $modalInstance.dismiss();
                    };

                    $scope.submitted = false;
                    setSelectedSharedTenantId();
            }];

            function open() {
                var modalInstance = $modal.open({
                    templateUrl: '../pkg/wisdom/common/angular/directives/dataset-editor/index.html',
                    controller: ModalInstanceCtrl,
                    scope: scope
                });

                modalInstance.result.then(
                    function(model) {
                        scope.callback({
                            model: model
                        });
                    },
                    function() {
                    }
                );
            };

            element.on('click', open);
        }
    };
}]);
4
  • Add getFilteredTenants() code or create a plunkr demo to reproduce the problem Commented Aug 21, 2019 at 6:41
  • Just check, what getFilteredTenants() function returns. Looks it produce wrong values. Commented Aug 21, 2019 at 7:11
  • @BillP : I have edited my post and added the complete JS code. Thank you! Commented Aug 21, 2019 at 14:16
  • Remove the function from ng-repeat. Populate the filtered array once Commented Aug 22, 2019 at 8:04

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.