Question

您好，我尝试使用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)

请帮助我解决此问题，或者至少告诉我出什么问题了。

Answer 1

在您的控制器中将BlogPost更改为const madeUpCards，而不是传入$scope.Cards，只需使用Cards

然后在您的控制器中，使用<h3>{{ getCardById('14') }}</h3>。即在控制器中：

$scope.Cards

在HTML中：

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

现在您仍然可以将Cards传递给<body ng-app="myApp" ng-controller="myCtrl"> <h3>{{ getCardById('14') }}</h3> </body>，但是它已经可以在您的控制器中访问了，所以毫无意义。

AngularJS仅将元素绑定到在作用域上定义的DOM。

您在控制器中将getCardById创建为局部变量，但不是作用域的一部分。因此，在HTML中，当您将Cards传递给函数时，其未定义（不是作用域的一部分）。

这会将未定义传递给您的控制器，然后您尝试对未定义调用Cards，因此会出错。

Answer 2

卡片未定义，请尝试

<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>

Answer 3

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

}]);

快乐的编码。

JavaScript内置的find（）函数不适用于angularjs 1.7

3 个答案: