Question

This is the html of my app

<div class="todo">
      <div class="todo_column">
        <div style="font-weight:700; padding:15px;text-align:center;border-radius:5px 0 0 0;">
          <button ng-click="add = true;todo=false" class="ui button">
            <i style="color:#fff;" class="add square icon"></i>
            Add
          </button>
        </div>
        <ul>
          <li ng-click="detail(todo)" ng-repeat="todo in todos track by $index">
            <h3>{{ todo.title }}</h3>
            <h6>{{ todo.note_date }}</h6>
          </li>
        </ul>
      </div>
      <div class="todo_full">
        <div class="todo_title">

          <h1>
            <span ng-show="todo">{{ title }}</span>
            <input ng-show="add" class="input_title" type="text" placeholder="Title" ng-model="newTitle"/>
            <input ng-show="editing" class="input_title" type="text" value="{{ title }}"/>
          </h1>

          <span class="check">
            <i style="font-size:2em;" ng-show="todo" class="square outline icon"></i>
            <i class="write square icon" ng-show="todo" ng-click="todo=false;editing=true" style="font-size:2em;"></i>
            <i class="check square icon" ng-show="{{ todo.complete }}" style="font-size:2em;"></i>
            <i class="add square icon" ng-show="add" ng-click="newEntry()" style="font-size:2em;"></i>
            <i class="check square icon" ng-show="editing" ng-click="editing=false;todo=true;" style="font-size:2em;padding-top:0;"></i>
          </span>
        </div>

        <h4>Note:</h4>

        <p ng-show="todo" class="todo_note">{{ note }}
        </p>

        <textarea ng-show="add" class="todo_note" placeholder="Take a note" rows="20" ng-model="newNote"></textarea>

        <textarea ng-show="editing" class="todo_note" placeholder="Take a note" value="{{ note }}" rows="20"></textarea>


      </div>
    </div>

this is the controller where i have defined a scope variable newTodo

var main = angular.module("mainPage",['ngRoute']);
var app = angular.module("appPage",["ngRoute"]);

main.config(function($routeProvider){
  $routeProvider
  .when("/", {
    templateUrl: "routes/main.html"
  })
  .when("/signup",{
    templateUrl: "routes/signup.html"
  });
});

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "routes/todo.html"
  })
  .when ("/setting", {
    templateUrl: "routes/setting.html"
  });
});

app.controller("appController", function ($scope) {
  $scope.add = true;
  $scope.newTodo = {
    title:"",
    note:"",
    note_date:"",
    complete:false
  };

  $scope.todos = [
    {title: "Call Vaibhav", note: "", note_date: "", complete: false},
    {title: "Grocery", note: "Lemons, Apple and Coffee", note_date: "", complete: false},
    {title: "Website design for Stallioners", note: "UI/UX on xyz@mail.com", note_date: "", complete: false},
    {title: "Fill MCA form", note: "First search for all the colleges", note_date: "", complete: false }
  ];

  $scope.newEntry = function() {
    $scope.newTodo.title = $scope.newTitle;
    $scope.newTodo.note = $scope.newNote;
    $scope.newTodo.note_date = Date.now();
    $scope.add=false;
    $scope.todo=true;
    $scope.todos.unshift(newTodo);
    console.log(newTodo);
    $scope.newTodo = {
      title:"",
      note:"",
      note_date:"",
      complete:false
    };
  };

  $scope.detail = function ( todo ) {
    $scope.title = todo.title;
    $scope.note = todo.note;
    $scope.todo=true;
    $scope.add=false;
    $scope.editing=false;
  };

});

// app.service("todos", function($http){
//   $http.get("mockdata/todos.json")
// });

the new function is not able to take the newTodo variable i took in it in the function but the as a parameter but then console responded that the ng-repeat dupes

Answer 1

You don't need to declare two module, have one,

var app = angular.module("appPage",["ngRoute"]); 
app .config(function($routeProvider){
}

ng- repeat dupes and $scope variable undefined

1 个答案: