ng-model绑定在控制器中返回未定义

时间:2019-02-08 23:42:04

标签: javascript angularjs

我正在尝试将控制器对象属性设置为用户使用ng-model输入的输入文本。尽管当我使用控制台记录该值时,它返回的值未定义,但是有人可以指出我可能做错了什么吗?

这是我的HTML代码

<ion-view view-title="Create Goal">
    <ion-content>
        <form style="margin-top:25px">

<!--Add the input text for the goal's name-->
            <div class="content double-padding" style="padding-bottom:0px">
                <h4 class="positive">{{ "_goal_name" | translate }}</h4>
                <input type="text" ng-model="name" style="border-bottom:1px solid grey;font-size:20px;margin-left:0px;width:100%">
            </div>



<!--Add the input range for the goal's distance-->
            <div class="content double-padding" style="padding-bottom:0px">
                <h4 class="positive">{{ "_goal_distance" | translate }}</h4>
                    <input type="text" ng-model="distance" style="border-bottom:1px solid grey;font-size:20px;margin-left:0px;width:100%">
            </div>



<!--Add the input text for the goal's start date in the form of aaaa-mm-dd-->
            <div class="content double-padding" style="padding-bottom:0px">
                <h4 class="positive">{{ "_goal_startDate" | translate }}</h4>
                <input type="text" ng-model="startDate" style="border-bottom:1px solid grey;font-size:20px;margin-left:0px;width:100%">
            </div>



<!--Add the input text for the goal's finish date in the form of aaaa-mm-dd-->
<!--Only appears  if the recurring option is true-->
            <div ng-show="goals.recurrent" class="content double-padding" style="padding-bottom:0px">
                <h4 class="positive">{{ "_goal_finishDate" | translate }}</h4>
                <input type="text" name="finishDate" style="border-bottom:1px solid grey;font-size:20px;margin-left:0px;width:100%">
            </div>



<!--Add the input checkbox for the goal's recurrence option -->
            <!--<ion-toggle ng-model="goals.recurrent" ng-checked="goalRecurrent" toggle-class="toggle-positive">-->
                <!--<h4 class="positive" style="font-size:18px;">{{ "_goal_recurrence" | translate }}</h4>-->
            <!--</ion-toggle>-->



<!--Add the button that calls the function to save the new goal-->
            <div class="content double-padding" style="padding-bottom:0px">
                <button ng-click="createGoal()" class="button  button-positive button-block">{{ "_button_create" | translate }}</button>
            </div>

        </form>
    </ion-content>
</ion-view>

这是我的控制器代码

.controller("GoalFormCtrl", function($scope, $state, $stateParams) {

    $scope.createGoal = function() {
        $scope.goal = {
            name : $scope.name,
            distance : $scope.distance,
            startDate : $scope.startDate,
            // recurrent : $scope.goalRecurrent
        };

        console.log($scope.goal);
    };
  })

1 个答案:

答案 0 :(得分:1)

请检查下面的链接,我已将其添加到了塞子中

ng-controller="GoalFormCtrl"

模型值未获取控制器上下文

http://plnkr.co/edit/81Vi92bQjjhQxsIw1axD