Угловой js-не способен протолкнуть к массиву

Я пытаюсь протолкнуть некоторую информацию в массив и показать ее с помощью ng-repeat, но по какой-то причине это не работает

Это мой контроллер: 

(function () {
'use strict';

angular
    .module('app.article')
    .controller('Article', Article);

function Article($location) {

    var vm = this;

    vm.comments = [];
    vm.addComment = addComment;

    function addComment() {
        vm.comments.push(vm.newComment);
        vm.newComment = {};
    }


}

})();

Вот планкр: https://plnkr.co/edit/jPOJDXoG1vgNfsDzyJAD?p=preview

Спасибо за помощь

2 2
javascript angularjs

2 ответа:

Для вашего контроллера вы используете контроллер в качестве синтаксиса, поэтому вам придется ссылаться на переменные области с префиксом vm.

<div ng-controller="Article as vm">
    <form ng-submit="vm.addComment()">
        <textarea placeholder="Sign in to share your thoughts." ng-model="vm.newComment.comment"></textarea>
        <input type="text" class="form-control" ng-model="vm.newComment.user">
        <input type="submit" class="btn btn-primary" value="Post">
    </form>

    <ul>
        <li ng-repeat="comment in vm.comments">{{comment.user}} - {{comment.comment}}</li>
    </ul>
</div>

Также в вашем контроллере вы должны инициализировать объект newComment 

function Article($location) {

    var vm = this;

    vm.comments = [];
    vm.addComment = addComment;
    vm.newComment = {user: '', comment: ''}
    function addComment() {
        vm.comments.push(vm.newComment);
        vm.newComment = {};
    }


}

Обновленный Плунжер

2
<div ng-controller="Article as vm">
        <form ng-submit="vm.addComment()">
            <textarea placeholder="Sign in to share your thoughts." ng-model="vm.newComment.comment"></textarea>
            <input type="text" class="form-control" ng-model="vm.newComment.user">
            <input type="submit" class="btn btn-primary" value="Post">
        </form>

        <ul>
            <li ng-repeat="comment in vm.comments">{{comment.user}} - {{comment.comment}}</li>
        </ul>
    </div>

Вот обновленный plunkr https://plnkr.co/edit/HK4WIYCF6poMXncBU9Uk?p=preview

0