如何获取传递给AngularJS中的引导模式的值

时间:2016-04-26 01:32:26

标签: javascript php angularjs ajax hidden-field

我尝试使用Angular JS实现Todo列表并将其与MySQL和PHP连接。我有一个工作代码,其中用于打开模态的按钮将php变量传递给该模态。我已将该值放在隐藏的输入字段中(在模态中)。现在,我希望得到这个值,所以我可以使用它AngularJS,因为我将在一个单独的PHP页面中通过AJAX再次传递它。问题是,它始终返回undefined。我哪里错了?

将php变量和值传递给模态的JQuery代码:

<script>
    $(document).ready(function(){
      $('#editModal').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id');
        $("#new-taskID").val(id); // e.g. 3
       });
    });
</script>

&#39; EditModal&#39; (Bootstrap模态内的表格)

<form class="cmxform" id="editTask" name="dasd" onsubmit="return false" method="post" action="" role="form">
    <div class="col-md-12">
       <div ng-app>
             <div id="todoapp" ng-controller="TodoCtrl"> 
                <div class="form-group form-animate-text" style="margin-top:15px !important;">
                    <input type="text" class="form-text" id="new-todo" ng-model="todoText" name="allotted_time_edit" ng-keyup="addTodo()" required>
                    <span class="bar"></span>
                    <label>What needs to be done?</label>
                    <input type="hidden" class="form-text" id="new-taskID"  value = "" name="new-taskID" required> //the passed value is placed here
                </div>

            <section id="main" style="display: block;">
                <div ng-show="isTodo()">
                    <input id="toggle-all" type="checkbox" ng-model="markAll" ng-click="toggleMarkAll()"/>
                    <label for="toggle-all">Mark all as complete</label>
                </div>

                <ul id="todo-list" class="unstyled">
                    <li ng-repeat="todo in todos" ng-dblclick="toggleEditMode()">
                    <div class="view" ng-keyup="editTodo()">
                        <input type="checkbox" ng-model="todo.done"/>
                        <span class="done-{{todo.done}}" >{{todo.text}}</span>
                    </div>
                    <input class="edit" type="text" ng-model="todo.text" ng-keyup="editOnEnter(todo)"/>
                    </li>
                </ul>
            </section>

            <footer style="display: block;">
                <div class="todo-count">{{remaining()}} of {{todos.length}} remaining</div>
                <a id="clear-completed" ng-click="clear()" ng-show="hasDone()">
                Clear <span >{{(todos.length - remaining())}} {{itemText()}}</span>.</a>
            </footer>
        </div>
    </div>
    </div>
    <center>
        <button id="send" type="submit" class="btn btn-primary" name="dasd">Update</button>
        <button type="button" class="btn btn-danger"data-dismiss="modal">Cancel</button>
    </center>
</form>

AngularJS代码

<script>
    function TodoCtrl($scope, $http) {

        $scope.todos = [];
        $scope.markAll = false;


        $scope.addTodo = function(item) {
        var name = $scope.todoText;
        var id = document.getElementById('new-taskID').val;
        alert(id); //return undefined
        if(event.keyCode == 13 && name){
            $http.post("ajax-search/add_checklist.php?item="+name).success(function(data){ $scope.todos.push({text:$scope.todoText, done:false});                                
            $scope.todoText = '';
             });
           }
         };

        $scope.isTodo = function(){
            return $scope.todos.length > 0;  
        }
         $scope.toggleEditMode = function(){
             $(event.target).closest('li').toggleClass('editing');
         };
        $scope.editOnEnter = function(todo){
            if(event.keyCode == 13 && todo.text){
             $scope.toggleEditMode();
            }
        };

        $scope.remaining = function() {
            var count = 0;
            angular.forEach($scope.todos, function(todo) {
                count += todo.done ? 0 : 1;
            });
            return count;
        };

        $scope.hasDone = function() {
            return ($scope.todos.length != $scope.remaining());
        }    

        $scope.itemText = function() {
            return ($scope.todos.length - $scope.remaining() > 1) ? "items" : "item";     
        };

        $scope.toggleMarkAll = function() {
         angular.forEach($scope.todos, function(todo) {
        todo.done =$scope.markAll;
        });
         };

        $scope.clear = function() {
            var oldTodos = $scope.todos;
            $scope.todos = [];
            angular.forEach(oldTodos, function(todo) {
            if (!todo.done) $scope.todos.push(todo);
            });
            };

        }
    </script>

我真的需要获取值,但它返回undefined。非常感谢您的帮助。非常感谢你!!

0 个答案:

没有答案