不使用angularjs1.7的JavaScript内置find()函数
你好，我正在尝试使用Angularjs，我不太擅长它。我试图从madeUpCards[]数组中找到一些东西。使用javascript的find()函数。我不完全确定，我认为当我和Angularjs一起使用它时，它是不起作用的。这是我的守则：
<body ng-app="myApp" ng-controller="myCtrl">
<h3>{{getCardById('14')}}</h3>
</body>数组如下：
$scope.madeUpCards = [
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
];javascript：
const app = /**
* myApp Module
*
* Description
*/
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
$scope.getCardById = function(id) {
this.id = id
let foundCard = $scope.madeUpCards.find(function(card, index){
return card.id == this.id
});
return foundCard.name;
}
}]);在控制台中，这将显示：
angular.js:15536 TypeError: Cannot read property 'find' of undefined
at ChildScope.$scope.getCardById ((index):49)
at fn (eval at compile (angular.js:16387), <anonymous>:4:234)
at expressionInputWatch (angular.js:17398)
at Scope.$digest (angular.js:19095)
at Scope.$apply (angular.js:19463)
at bootstrapApply (angular.js:1945)
at Object.invoke (angular.js:5122)
at doBootstrap (angular.js:1943)
at bootstrap (angular.js:1963)
at angularInit (angular.js:1848)请帮我解决这个问题，或者至少告诉我怎么回事。
回答 3
Stack Overflow用户
发布于 2019-01-22 13:54:56
将控制器中的const madeUpCards更改为$scope.Cards，而不是传递Cards，只需使用<h3>{{ getCardById('14') }}</h3>
然后在控制器中使用$scope.Cards。即在主计长中：
$scope.Cards = [
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
];
...
$scope.getCardById = function(id) {
let foundCard = $scope.Cards.find(function(card, index){
return card.id == this.id
});
return foundCard.name;
}在HTML中：
<body ng-app="myApp" ng-controller="myCtrl">
<h3>{{ getCardById('14') }}</h3>
</body>现在您仍然可以将卡片传递给getCardById，但是它已经可以在控制器中访问，因此没有意义。
AngularJS只将元素绑定到在作用域上定义的DOM。
您将Cards创建为控制器中的局部变量，但不是作用域的一部分。因此，在HTML中，当您将Cards传递给函数时，它是未定义的(而不是作用域的一部分)。
这会将未定义的信息传递给控制器，然后尝试在未定义的情况下调用find，从而导致错误。
Stack Overflow用户
发布于 2019-01-22 13:45:01
卡片是未定义的，请尝试
<h3>{{ getCardById([
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
], '14') }}</h3>Stack Overflow用户
发布于 2019-01-22 13:58:38
<h3>{{ getCardById(Cards, '14') }}</h3>根据这个片段，变量Cards应该绑定到$scope。
因此，在控制器的初始部分定义一个$scope.Cards，如下所示：
const app = /**
* myApp Module
*
* Description
*/
angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
$scope.Cards = [
{
"id": "23",
"name": "The brain",
"closed": true,
},
{
"id": "2",
"name": "Portal dead",
"closed": true,
},
{
"id": "14",
"name": "Holiday",
"closed": true,
},
{
"id": "13",
"name": "warded",
"closed": true,
},
];
$scope.getCardById = function(cards, id) {
this.cards = cards
this.id = id
let foundCard = this.cards.find(function(card, index){
return card.id == this.id
});
return foundCard;
};
}]);编码愉快。
https://stackoverflow.com/questions/54309583
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号