如何将模板中的唯一ID与控制器中的过滤器功能进行匹配？

Question

Here is my app.js :

.state('app.study_collections', {
    url: "/studies/:studynodeRef",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/overview.html"
      }
    }
})

Here is a snippet from my studies.html :

<div class="feed-item">
  <div class="feed-media" ng-repeat="study in studies">
    <img src="{{study.image}}" class="feed-image">
    <div class="feed-gradient-overlay"></div>
    <a href="#/app/studies/{{study.nodeRef}}">
       <h4 class="feed-title">{{study.title}}</h4>
    </a>
  </div>
</div>

Here is a snippet from my controller.js :

Studies.all().then(function(payload){
   $scope.studies = payload;
});

Studies.all().then(function(studies){
   $scope.study = $filter('filter')(studies, function (d) {return d.nodeRef === '"'+ $stateParams.studynodeRef + '"';})[0];
});

So Studies.all() makes call to the studies service which makes asynchronous calls to a json file to get data.

Studies.all().then(function(payload){
  $scope.studies = payload;
});

This gets the list of all the studies which are iterated in the studies.html file. Each study has its unique nodeRef. When you click on a study it maps to the url "#/app/studies/{{study.nodeRef}}" . After that I want to use that nodeRef to filter out a study object from the studies collection which is supposed to be done by

Studies.all().then(function(studies){
$scope.study = $filter('filter')(studies, function (d) {return d.nodeRef === '"'+ $stateParams.studynodeRef + '"';})[0];
});

where d.nodeRef === '"'+ $stateParams.studynodeRef + '"' matches it with the correct nodeRef and filters out that study. But when I try to simply print the study in the template like {{study}} , nothing appears and when I do a console.log() it is undefined.

How do I fix this? Please let me know if any clarifications are needed.

Edit

I made some changes to my controller. I am able to access the nodeRef from the url now but it doesn't work in my filter function for some reason unless I manually enter it. Have a look at it here https://gist.github.com/shubhamsinha92/01b492c62c4dd5ad3a7c

This is what my services.js looks like:

var app = angular.module('starter.services', [])


.factory('Studies',function($http,$filter,$q){
    var deferred = $q.defer();
    var studies = [];
    $http.get("studies.json").success(
            function(data){
                //studies = data;
                angular.copy(data, studies);
                //At this point you can filter data as required, or not at all. I would suggest returning the entire JSON response and not filtering here at all, let the controllers filter the data as needed to maintain a layer of separation between controller and service.

                deferred.resolve(studies);
            }
        );

  return {
    all: function(){
      return deferred.promise;
    }
};
})

Answer 1

The appears to be that you are comparing '"nodeId"' to 'nodeId'.

Original

$filter('filter')(payload, function (d) {
    $scope.id = '"' + $rootScope.nodeId + '"';
    return d.nodeRef === $scope.id ;})[0]; 

Solution

$filter('filter')(payload, function (d) {
  $scope.id = "" + $rootScope.nodeId;
  if (d.nodeRef === $scope.id)
    return d;})[0]; 

Please see this example

https://jsfiddle.net/HB7LU/15157/