Встроенная в JavaScript функция find () не работает с angularjs 1.7 - PullRequest
Новая
       0

Встроенная в JavaScript функция find () не работает с angularjs 1.7

0 голосов
/ 22 января 2019

Здравствуйте, я пытаюсь использовать Angularjs, и я не очень хорош в этом.Я пытаюсь найти что-то из массива madeUpCards [].используя функцию find () javascript.Я не совсем уверен, я думаю, что это не работает, когда я использую его с Angularjs.вот мой массив Code: 

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

0 голосов
/ 22 января 2019

Измените 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 в функцию, она не определена (не является частью области видимости).

Это передает undefined в ваш контроллер, а затем вы пытаетесь вызвать find on undefined, следовательно, ваша ошибка.

0 голосов
/ 22 января 2019 
<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;
    };

}]);

Удачного кодирования.

0 голосов
/ 22 января 2019

Карты не определены, попробуйте это 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...