Question

我是角度和离子框架的新手，并构建了一个简单的待办事项列表的Android应用程序。我在这方面遇到的问题很少，当我调用编辑功能弹出窗口时，当我编辑它时它不会保存它。另一个是现在我的弹出窗口没有出现并且它给了我以下问题

1）http://prntscr.com/d4yj27 2）http://prntscr.com/d4ymm5

我正在粘贴我的完整代码，请帮助我

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/ngDraggable.js"></script>
  </head>
  <body ng-app="elegantTodo" ng-controller="todoCntrl">

    <ion-pane>
      <ion-header-bar class="bar bar-header bar-calm">
         <label class="item-input-wrapper">

            <input class="ionic-search-bar" ng-model="searchdata" type="search" placeholder="Search">
          </label>
          <button class="button button-clear" ng-click="searchclear()">
            <i class="icon ion-ios-close-empty"></i>
          </button>
      </ion-header-bar>


      <ion-content class="todolist-items" scrollY="true">
          <ul class="list draglist">
              <li class="item" ng-drag="true" ng-drag-data="x" ng-class="x" ng-repeat="x in todolist | filter:searchdata track by $index" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
              <div class="individual-item" ng-click="editTodo(x)">
                {{x}}
              </div>
                <span ng-click="removeItem($index)"><i class="icon ion-ios-close-empty" ></i></span> 
              </li>
          </ul>

      </ion-content>

      <ion-footer-bar class="bar bar-footer bar-calm">
 <!--p class="error-msg">{{errortext}}</p-->
            <label class="item-input-wrapper">
                <input type="text" class="ionic-search-bar" ng-model="addMe" placeholder="Add Your Task Here...">
          </label>
          <button class="button button-clear" ng-click="addItem()">
            <i class="icon ion-ios-plus-empty"></i>
          </button>
      </ion-footer-bar>
    </ion-pane>
  </body>
</html>

App.js

var app = angular.module('elegantTodo', ['ionic','ngDraggable']);

app.factory('Todo', function() {
  return {
    all: function() {
      var itemlist = window.localStorage['todolist'];
      if(itemlist) {
        return angular.fromJson(itemlist);
      }
      return [];
    },
    save: function(todolist) {
      window.localStorage['todolist'] = angular.toJson(todolist);
    }
  }
});

app.controller("todoCntrl", function($scope, $ionicPopup, Todo){
  $scope.todolist = Todo.all();
  $scope.addItem = function(){
    $scope.errortext = "";
    if(!$scope.addMe){return;}
    if($scope.todolist.indexOf($scope.addMe) == -1){
      $scope.todolist.push($scope.addMe); 
      Todo.save($scope.todolist);
      $scope.addMe = "";
    }else{
      alert("This task is already exists in your todo List");
    }
  }
  $scope.removeItem = function(index){
    $scope.errortext = "";
    $scope.todolist.splice(index, 1);
    Todo.save($scope.todolist);
  }
  $scope.searchclear = function(){
    $scope.searchdata = "";
  }


  $scope.editTodo = function(x) {
  $scope.data = { response: x }; // A hack to pre-populate prompt
  $ionicPopup.prompt({
    title: "Edit Task",
    scope: $scope
  }).then(function(res) {    // promise
    if (res !== undefined) x = $scope.data.response; // response not res has new title (hack
  })
}



  $scope.onDropComplete = function (index, x, evt) {
    var otherObj = $scope.todolist[index];
    var otherIndex = $scope.todolist.indexOf(x);
    $scope.todolist[index] = x;
    $scope.todolist[otherIndex] = otherObj;
}


});

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

我完全迷失了，请在我做错的地方帮助我

Mayank

Ionic Framework编辑功能不起作用

0 个答案: