Question

我试图在工厂中读取数组中的值，但我无法这样做。我正在使用ng-grid，当我点击一行时，我得到了selectitems列表，我在另一个控制器中传递，我在其中调用工厂服务，我将其作为参数传递，但工厂中的参数保持为数组，当我读取时它使用索引显示空白。我的代码如下 -

myNgApp.controller('MyGrid', ['$scope', function ($scope) {
    $scope.mySelections = [];
    $scope.mySelItems = [];
    $scope.myData = [{ Reference: 12, Customer: "fff", Title: "sd", Task: "Enter Details", Received: "Today", Due: "01/09/2014" },
    { Reference: 7899, Customer: "eee", Title: "dsd", Task: "Enter Details", Received: "Yesterday", Due: "05/09/2014" }];

    $scope.gridOptions = {
        data: 'myData',
        checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
        selectWithCheckboxOnly: true,
        showSelectionCheckbox: true,
        selectedItems: $scope.mySelections,
        multiSelect: true,
        columnDefs: [{ field: 'Reference', displayName: 'Reference', width: '*' }, { field: 'Customer', displayName: 'Customer', width: '**' }, { field: 'Title', displayName: 'Title', width: '***' }, { field: 'Task', displayName: 'Task', width: '***' }, { field: 'Received', displayName: 'Received', width: '**' }, { field: 'Due', displayName: 'Due', width: '**' }],
        showGroupPanel: true,
        enableCellSelection: false,
        enableRowSelection: true,
        enableCellEditOnFocus: false,
        enablePinning: true,
        showColumnMenu: true,
        showFilter: true,
        enableColumnResize: true,
        enableColumnReordering: true,
        maintainColumnRatios: true,
        afterSelectionChange: function () {

            angular.forEach($scope.mySelections, function (item) {
                if ($scope.mySelItems.length == 0) {
                    $scope.mySelItems.push(item.Title)
                }
                else {
                    $scope.mySelItems[0] = item.Title
                }
            });
        }

    };

}]);


    myNgApp.factory('myPreviewDataService', function () {

    return function (x) {

        var arr = [x, "Apple", "Banana", "Orange"];

        return arr
    };
});

    myNgApp.factory('myPreviewTplService', function () {
    return function () {

        return '<div><div class="ngPreviewItems" ng-repeat="item in items">{{item}}</div></div>';
    };
});

myNgApp.directive('showPreview', function ($compile) {
    return {
        scope: true,
        link: function (scope, element, attrs) {
            var el;

            attrs.$observe('template', function (tpl) {
                if (angular.isDefined(tpl)) {
                    // compile the provided template against the current scope
                    el = $compile(tpl)(scope);

                    // stupid way of emptying the element
                    element.html("");

                    // add the template content
                    element.append(el);
                }
            });
        }
    };
});

myNgApp.controller('myPreviewController', function ($scope, myPreviewDataService, myPreviewTplService) {
    //$scope.showContent = function () {

    $scope.items = myPreviewDataService($scope.mySelItems);
    $scope.template = myPreviewTplService();
    //};
});

这里$ scope.mySelItems来自ng网格控制器，当我们选中一个复选框时会更新。我得到的是一个数组，但我无法读取它的内容，当我显示数组时，它显示为[＆＃34; test＆＃34;]但是当我尝试在myPreviewDataService中读取它[x]时工厂或myPreviewController中的$ scope.mySelItems [0]然后我变成空白。我无法弄清楚为什么会发生这种情况

Answer 1

我能够解决它。在 myPreviewDataService 工厂中，我将数组元素从字符串更改为数组

var arr = [x, "Apple", "Banana", "Orange"];

更改为

var arr = [x, ["Apple"], ["Banana"], ["Orange"]];

在 myPreviewTplService 工厂中，我将{{item}}更改为{{item[0]}}

它有效。

PS我认为我们也可以根据项目类型在 myPreviewTplService 工厂中根据条件使用ng开关，我试过这样做，但我无法这样做并且工作了我早先的解决方案。

我想在angularjs中读取工厂内的数组值

1 个答案: