通過角度生成的字符串訪問JSON對象

Question

我正在Angular中創建一個控制器，我得到的url部分和一些參數與$statePrams。

我打電話給$http服務從json文件中取回數據。獲取數據後，我將指定的對象元素的內容（從$stateParams生成）指定給一個$scope變量，我可以在該視圖中處理這些變量以生成某種無序列表元素。

我的問題是，當我生成例如路徑爲result['data']['datas']['timeline']，那麼它將無法正常工作，並給我ngRepeat:dupe錯誤。

但是根本沒有重複。如果我只是像$scope.naviData = result['data']['datas']['timeline'];那樣手動輸入它，它會生成對象，給我所有需要的數據並在視圖中繪製li元素。

我怎麼能解決這個問題，因爲我不知道如何做這個動態的對象元素訪問，否則。這裏有兩個圖像：

第一個是具有手動寫入

第二個是與動態地生成的可變 在兩者情況下的第一console.info是狀態PARAMS我生成從路徑。另外這裏是代碼爲我做的魔術部分。

angular.module('MPWeb.datas', []) 
 
    .controller('DataDetailsCtrl', function($scope, $state, $stateParams, $http) { 
 
    $scope.params = $stateParams; 
 
    // set datas for dynamic object handling 
 
    var base = 'data.datas'; 
 
    var category = ($scope.params.categoryId) ? $scope.params.categoryId : ''; 
 
    var article = ($scope.params.articleId) ? $scope.params.articleId : ''; 
 
    var stateConfig = (article) ? { 
 
     params: { 
 
     prefix: base, 
 
     categoryId: category, 
 
     articleId: article 
 
     } 
 
    } : { 
 
     params: { 
 
     prefix: base, 
 
     categoryId: category 
 
     } 
 
    }; 
 
    console.info(stateConfig.params); // this is the first console entry on the screenshots 
 
    // with this function I get back a standard joined string 
 
    var objToString = function(obj) { 
 
     var tabjson = []; 
 
     for (var p in obj) { 
 
     if (obj.hasOwnProperty(p)) { 
 
      tabjson.push(obj[p]); 
 
     } 
 
     } 
 
     tabjson.push() 
 
     return tabjson.join('.'); 
 
    }; 
 
    // generate sideNavigation 
 
    $http({ 
 
     method: 'GET', 
 
     url: './json/mp-navigation.json' 
 
    }).then(function successCallback(result, status, headers) { 
 
     var temp = objToString(stateConfig.params); 
 
     var naviTemp = (stateConfig.params.articleId) ? temp.replace(/\.[^.]+$/, "") : temp; 
 
     naviTemp = "result['" + naviTemp + "']"; 
 
     naviTemp = naviTemp.replace(/\./g, "']['"); // dynamically generated path with bracket notation method 
 
     //$scope.naviData = naviTemp; // if I use this, it gives me the error 
 
     $scope.naviData = result['data']['datas']['timeline']; 
 
     console.info(naviTemp); 
 
    }, function errorCallback(result, status, headers) { 
 
     console.warn(status); 
 
    }); 
 
    });

另外，如果我在視圖中使用track by $index它只會產生從我的生成路徑的信li元素。

Answer 1

問題是你在你的模板中使用了你的ng-repeat中的trackby。 但trackby接受數組中對象的唯一鍵。

例如：

values = [{id:12,name:'king'},{id:13:name :'ram'},{id:14:name:'king'}] 

正確

<div ng-repeat="value in values track by id"> 
{{value.name}} : {{value.id}} 
</div> 

正確

<div ng-repeat="value in values track by $index"> 
{{value.name}} : {{value.id}} 
</div> 

錯誤的，因爲名稱不唯一

<div ng-repeat="value in values track by name"> 
{{value.name}} : {{value.id}} 
</div> 

Answer 2

所以過了幾天，我終於找到了一點幫助。對於任何人誰在將來發現這個問題，這就是如何在控制器解決：

$scope.params = $stateParams; 
    $scope.navPrefix = $state.current.url.split('/:')[0]; 
    $scope.navPrefix = ($scope.params.categoryId) ? $scope.navPrefix + '/' + $scope.params.categoryId + '/' : $scope.navPrefix + '/'; 
    $scope.activeItem = ($scope.params.articleId) ? $scope.params.articleId : $scope.params.categoryId; 
    var tempCat = $state.current.url.substr(1); 
    $scope.naviCat = tempCat.split('/:')[0]; 
    // set datas for dynamic object handling 
    var base = $scope.naviCat; 
    ... 
    // generate sideNavigation 
    $http({ 
    method: 'GET', 
    url: './json/mp-navigation.json' 
    }).then(function successCallback(result, status, headers) { 
    var naviMain = result.data[$scope.naviCat]['main']; 
    var naviTemp = result.data[stateConfig.params.prefix][stateConfig.params.categoryId]; 
    $scope.naviData = (stateConfig.params.categoryId == '') ? naviMain : naviTemp; 
    }, function errorCallback(result, status, headers) { 
     console.warn(status + ' with getting: ' + headers); 
    }); 

乾杯