在Angular Factory中獲取屬性元素

Question

當我在我的投資組合中選擇項目時，我的路線爲/portfolio/:workName。在我的控制器中，我想將$scope.work設置爲基於workName選擇的項目。這是我到目前爲止有：

app.factory('Works', function(){ 

var Works = {} 

Works.projects =[ 
    { 
     name : "ProjectOne", 
     string : "stuff", 
    { 
     name : "ProjectTwo", 
     string : "more stuff", 
    }, 
    { 
     name : "ProjectThree", 
     string : "stuff", 
    } 
]; 

Works.findByName = function(name) { 
    Works.projects.forEach(function(work) { 
     if(work.name == name) { 
      return work; 
     } 
    }); 
} 
return Works; 
}) 

app.controller("ProjectController", function ($scope, Works, $routeParams) { 
$scope.work = Works.findByName($routeParams.workName); 
}); 

然而，在調試器中，儘管$routeParams.workName返回 「ProjectOne」，Works.findByName($routeParams.workName)返回undefined。

Answer 1

的問題與你的代碼是forEach是not returning a value（你是不是在findByName方法和the return value of forEach is undefined返回結果爲好），而只是執行比較。您可以修改方法如下或使用filter()方法（Works.findByNameUsingFilter爲例）：

angular.module('myApp', []) 
 
.factory('Works', [function(){ 
 
    var Works = {}; 
 
    Works.projects = [ 
 
     { 
 
      name: "ProjectOne", 
 
      string: "stuff1" 
 
     }, 
 
     { 
 
      name : "ProjectTwo", 
 
      string : "more stuff", 
 
     }, 
 
     { 
 
      name : "ProjectThree", 
 
      string : "stuff", 
 
     } 
 
    ]; 
 

 
    Works.findByName = function(name) { 
 
     var res = ''; 
 
     Works.projects.forEach(function(work) { 
 
      if(work.name === name) { 
 
       res = work; 
 
      } 
 
     });  
 
     return res; 
 
    }; 
 
    
 
    Works.findByNameUsingFilter = function(name) { 
 
     return Works.projects.filter(function(work) { 
 
      return work.name === name; 
 
     });  
 
    }; 
 

 
    return Works; 
 
}]) 
 
.controller("ProjectController", ['$scope', 'Works', function ($scope, Works) { 
 
    $scope.workUsingFindByName = Works.findByName("ProjectOne"); 
 
    $scope.workUsingFindByNameUsingFilter = Works.findByNameUsingFilter("ProjectThree"); 
 
}]);

<script src="//code.angularjs.org/1.6.2/angular.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="ProjectController"> 
 
    {{workUsingFindByName.string}} 
 
    <br/> 
 
    {{workUsingFindByNameUsingFilter[0]}} 
 
    </div> 
 
</div>

Answer 2

檢查代碼將Works.findByName更改爲無功功能。

app.factory('Works', function(){ 

var Works = {} 

Works.projects =[ 
    { 
     name : "ProjectOne", 
     string : "stuff", 
    { 
     name : "ProjectTwo", 
     string : "more stuff", 
    }, 
    { 
     name : "ProjectThree", 
     string : "stuff", 
    } 
]; 

var findByName = function(name) { 
    Works.projects.forEach(function(work) { 
     if(work.name == name) { 
      return work; 
     } 
    }); 
} 
return {findByName: findByName}; 

}); 

app.controller("ProjectController", function ($scope, Works, $routeParams) { 
$scope.work = Works.findByName($routeParams.workName); 
}); 

Answer 3

這些都是在你的代碼中的錯誤：在Works

1. '{' 失蹤。項目。
2. 使用過濾器代替forEach或map
3. 您沒有正確返回值。正確的方法檢查的代碼片段：

var Works = {}; 
 
Works.projects =[ 
 
    { 
 
     name : "ProjectOne", 
 
     string : "stuff" 
 
    }, 
 
    { 
 
     name : "ProjectTwo", 
 
     string : "more stuff" 
 
    }, 
 
    { 
 
     name : "ProjectThree", 
 
     string : "stuff" 
 
    } 
 
]; 
 

 
Works.findByName = function(name) { 
 
    //ES5 Syntax 
 
    return Works.projects.filter(function(work) { 
 
     if(work.name == name) { 
 
      return work; 
 
     } 
 
    }); 
 
    
 
    //ES6 Syntax 
 
    //return Works.projects.filter(work => (work.name == name)); 
 
} 
 

 

 

 
console.log(Works.findByName('ProjectThree'))