Question

我在Angular中创建一个控制器，我用$statePrams获取了url部分和一些参数。

我调用$http服务从json文件中获取数据。在获取数据之后，我将指定的对象元素的内容（从$stateParams生成规范）分配给$scope变量，我可以在视图中处理该变量以生成某种无序的变量列表元素。

我的问题是当我生成例如result['data']['datas']['timeline']的路径时，它就不会工作，并且给我ngRepeat:dupe错误。

然而，根本没有重复。如果我只是像$scope.naviData = result['data']['datas']['timeline'];那样手动输入，它会生成对象，提供所有需要的数据并在视图中绘制li元素。

我怎么能解决这个问题，因为我不知道如何进行这种动态对象元素访问。这是两张图片：

第一个是手动编写

第二个是动态生成的变量 两种情况下的第一个console.info是我生成路径的状态参数。这里还有代码为我做了神奇的部分。

＆＃13;

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

＆＃13;

此外，如果我在视图中使用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);
  });

干杯

通过Angular中生成的字符串访问JSON对象

2 个答案: