问TypeError:无法从输入读取未定义的Get值的属性'‘。使用angular js打印div中的值
EN

Stack Overflow用户

提问于 2017-01-25 22:09:56

回答 1查看 480关注 0票数 0

HTML代码

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic Sample ToDoListApp</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="js/app.js"></script>
    <link href="lib/datepicker-for-ionic/dist/style.css" rel="stylesheet">
    <!-- path to ionic/angularjs js -->
    <script src="lib/datepicker-for-ionic/dist/templates.min.js"></script>
    <script src="lib/datepicker-for-ionic/dist/ionic-datepicker.min.js"></script>
</head>

<body ng-controller="ToDoListCtrl">
    <ion-header-bar align-title="center" class="bar-positive">
        <h1 class="title">Tasks</h1>

    </ion-header-bar>

    <ion-content>
        <div class="list list-inset">
            <ion-item ng-repeat="item in toDoListItems " n ng-click="openDodal()">Task {{$index + 1}}</ion-item>
        </div>
        <div class="buttons">
            <button class="button button-block" ng-click="openModal()">Add Task</button>
        </div>
    </ion-content>

    <ion-footer-bar class="bar-positive">
    </ion-footer-bar>


    <script id="modal.html" type="text/ng-template">
        <div class="modal">
            <div class="bar bar-header bar-calm">
                <h1 class="title">Add New Task</h1>
            </div>
            <br></br>
            <form novalidate>
                <div class="list">
                    <div class="list list-inset" >
                        <label class="item item-input"  id="descriptions">
                            <input type="text" height:"900px" class="description" placeholder="Description ..." ng-model="data.describe" required>
                        </label>
                        <label input="email" class="item item-input" id="email" ng-model="data.email" required >
                            <span class="input-label">Email</span>
                            <input type="email">
                        </label>
                        <label class="item item-input" id="">
                            <span class="input-label">Date</span>
                            <input type="date">
                        </label>     
                    </div>
                                  <button class="button button-block button-balanced" type="submit" ng-click="AddItem(data)">
                        Add Item
                    </button>
                    <button class="button button-block button-assertive" ng-click="closeModal()"> cancel</button>

                </div>
            </form>
        </div>
    </script>
    <script id="dodal.html" type="text/ng-template">
        <div class="modal">

            <div class="bar bar-header bar-calm">
                <h1 class="title">Task {{$index}}</h1>

            </div>
           <div class="alert alert-info">
               {{great}}
           </div>
            <div style="position: absolute; bottom: 0px; width: 100%">
                <div style="text-align: center">
                    <form ng-submit="AddItem(data)">
                        <div class="list">
                            <div class="list list-inset">
                                <label class="item item-input" id="description">
                                    <input type="text" class="form-control input-lg" height:"900px" placeholder="Add Note " ng-model="searchText">
                                </label>
                                <button class="button button-block" ng-click="check()">Add Note</button>
                                <button class="button button-block" ng-click="closeDodal()">back</button>
                            </div>
                        </div>

                        </form>

                </div>
        </div>
      </div>

    </script>

</body>
</html>

app.js angularJS

angular.module('todo', ['ionic'])

.controller('ToDoListCtrl', function ($scope, $ionicModal ) {
$scope.toDoListItems = [{

}];
$scope.searchText = " ";

$scope.show = function()
{
    $scope.great = $scope.searchText;
}

$scope.AddItem = function (data) {
$scope.toDoListItems.push({ task: data.describe,status: 'not done' });

上面是我为创建任务而构建的应用程序的代码。当我尝试从输入中获取值使用angular js打印div中的值时，我得到了以下错误: TypeError:无法读取未定义的属性'describe‘

angularjs

语音识别特惠活动

语音识别准确率高、用于会议内容转写、客服质检等场景，助力企业将本增效

回答 1

Stack Overflow用户

发布于 2017-01-25 22:19:06

在开始将项推入数组和$scope.data变量之前，先对其进行初始化

$scope.toDoListItems = []; //in the beginning of your controller
$scope.data = {}; //initialize your data object

将您的单击事件更新为

<button class="button button-block button-balanced" type="submit" ng-click="AddItem()">

参见ng-click事件，我们不需要在这里发送数据对象，因为我们已经在管理我们作用域中的数据状态。

并更新AddItem函数，如下所示

$scope.AddItem = function () {
    $scope.toDoListItems.push({ task: $scope.data.describe,status: 'not done' });
    //reset the data variable after insert

    $scope.data = {};
}