ng-model不在$ scope中

时间:2014-02-21 16:02:56

标签: javascript angularjs

我在这个视图中创建了名为“nieuweDatum”和“nieuwOnderwerp”的2 ng模型:

**<div ng-controller="VergaderingCtrl">
    <form ng-submit="addVergadering()">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" ng-model="nieuweDatum" size="25" placeholder="Nieuwe vergaderdatum" class="form-control">
                    <span class="input-group-btn"><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-plus" /></button></span>
                 </div>
            </div>
        </div>
    </form>


     <accordion close-others="true">

        <accordion-group ng-repeat="vergadering in vergaderingen">
            <accordion-heading>
                <accordion-paneltitle>Vergaderdatum: {{vergadering.Datum | date:'fullDate'}}</accordion-paneltitle> <span class="glyphicon glyphicon-trash pull-right" ng-click="deleteVergadering(vergadering)"></span>
            </accordion-heading>
            <ul class="list-group" ng-repeat="onderwerp in vergadering.Onderwerpen">
                <li class="list-group-item">{{onderwerp.Omschrijving}}</li>
            </ul>
            <form ng-submit="addOnderwerp(vergadering)">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="input-group">
                            <input type="text" ng-model="nieuwOnderwerp" size="25" placeholder="Nieuw onderwerp" class="form-control">
                            <span class="input-group-btn"><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-plus" /></button></span>
                        </div>
                    </div>
                </div>
            </form>
        </accordion-group>
    </accordion>
</div>**

在controllercode中我可以通过引用“$ scope.nieuwDatum”来使用nieuweDatum,但是“scope.nieuwOnderwerp”是未定义的......

在这个控制器中,我发现该值存在于“this.nieuwOnderwerp”中(在addOnderwerp函数中)。谁能告诉我哪里出错了?

我是Angular的新人(显然),欢迎任何进一步学习的建议!

var collegeApp = angular.module('collegeApp', ['ui.bootstrap']);

collegeApp.controller('VergaderingCtrl', function($scope, $http) {

    $http.get('http://localhost:7286/api/vergaderingen')
       .then(function (res) {
           $scope.vergaderingen = res.data;
    });

    $scope.addVergadering = function () {
        $http.post('http://localhost:7286/api/vergaderingen', { Datum: $scope.nieuweDatum, Status: 2 })
        .success(function (item) {
            $scope.vergaderingen.push(item);
            $scope.nieuweDatum = '';
        })
        .error(function () {
            alert("Fout bij het opslaan!")        });
    };

    $scope.addOnderwerp = function (item) {
        var index = $scope.vergaderingen.indexOf(item)
        $scope.vergaderingen[index].Onderwerpen.push({ Omschrijving: this.nieuwOnderwerp });
        this.nieuwOnderwerp = '';
       };


    $scope.deleteVergadering = function (item) {
        $http.delete('http://localhost:7286/api/vergaderingen/' + item.Id)
        .success(function () {
            var index = $scope.vergaderingen.indexOf(item)
            $scope.vergaderingen.splice(index, 1);
        })
        .error(function () {
            alert("Fout bij het verwijderen!");
        });
    };

});

0 个答案:

没有答案