如何在angular js的同一位置用另一個HTML模板替換？

Question

我正在開發TODO應用程序。我有一個從index.html（todoTemplate.html）進行ui查看的模板：

    <div class="container-fluid">
  <div class="taskBox" ng-repeat="task in tasks">
    <div class="well">
      <h4 class="todoTitle">{{task.name}}</h4>
      <br>
      <h6>Created on : {{task.createdAt}}</h6>
      <a id="{{task.id}}" ui-sref=".update" ng-click="showDiv=true" class="right-floated-edit fa fw fa-edit"></button>
      <a ui-sref="#" class="right-floated-trash fa fw fa-trash"></a>
      <br>
      <a ui-sref="#" class="btn btn-warning form-control cross-btn">{{task.type}}</a>
    </div>
    <div ui-view ng-show="showDiv"></div>
  </div>
</div>

這是我要在上面的div和id（todoUpdate.html）一起顯示的模板：

    <div class="container-fluid">
  <div class="taskBox">
      <label for="taskName">Name</label>
      <input type="text" name="taskName" placeholder="What needs to be done"/>
      <input type="button" ng-click="updateTodo()" class="btn btn-success" name="update" value="Update"/>
      <br>
      <button class="btn btn-warning" ng-click="closeEditBox()">Back</button>
  </div>
</div>

這些是我的路線：

mod.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

  $stateProvider.state('allTodo',{
    url:'/todo',
    templateUrl: 'modules/todo/views/todoTemplate.html',
    controller: 'ToDoController'
  })

  .state('allTodo.update',{
    url:'/update',
    templateUrl: 'modules/todo/views/todoUpdate.html',
    controller: 'UpdateController'
  });
}]);

這些是我的控制器：

angular.module('myTodoApp.todoModule.controllers',['myTodoApp.todoModule.services'])

.controller('ToDoController',['$scope','todoService',function($scope,todoService){
  $scope.tasks=todoService.query();
}])

.controller('UpdateController',['$stateParams','$state','$scope','todoService',function($stateParams,$state,$scope,todoService){
        $scope.closeEditBox=function(){
            $state.go('allTodo');
        };
        $scope.updateTodo=todoService.query({id:$stateParams.id});
        console.log($scope.updateTodo);
}]);

目前執行后，我得到這樣的： 簡而言之，我想在單擊鏈接的todoTemplate.html的確切位置顯示todoUpdate.html，並且我應該能夠編輯內容並調用API來更新數據。
看一下這個演示，您將了解： https : //todo-vue.herokuapp.com/

請幫助我做到這一點，並非常感謝。

Answer 1

 var app = angular.module('myApp',[]); app.controller('myCtrl', function($scope){ $scope.tasks = [{name:"todo", id:"1"},{name:"hi", id:"2"},{name:"hello", id:"3"}]; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> <body ng-app="myApp"> <div class="container-fluid" ng-controller="myCtrl"> <div class="taskBox" ng-repeat="task in tasks"> <div class="well"> <h4 class="todoTitle">{{task.name}}</h4> <!-- <h6>Created on : {{task.createdAt}}</h6> --> <button id="{{task.id}}" ng-click="task.showDiv=true" class="right-floated-edit fa fw fa-edit">update</button> <div ng-show="task.showDiv"> <div ng-include="'template.html'"></div> </div> </div> </div> </div> <script id="template.html" type="text/ng-template"> <div class="taskBox"> <label for="taskName">Name</label> <input type="text" name="taskName" ng-model="task.name" placeholder="What needs to be done"/> <input type="button" ng-click="updateTodo()" class="btn btn-success" name="update" value="Update"/> <button class="btn btn-warning" ng-click="task.showDiv=false;">Back</button> </div> </script> </body>

嘗試如下。

 <div class="container-fluid">
  <div class="taskBox" ng-repeat="task in tasks">
    <div class="well">
      <h4 class="todoTitle">{{task.name}}</h4>
      <br>
      <h6>Created on : {{task.createdAt}}</h6>
      <a id="{{task.id}}" ui-sref=".update" ng-click="task.showDiv=true" class="right-floated-edit fa fw fa-edit"></button>
      <a ui-sref="#" class="right-floated-trash fa fw fa-trash"></a>
      <br>
      <a ui-sref="#" class="btn btn-warning form-control cross-btn">{{task.type}}</a>
    </div>
    <div ui-view ng-show="task.showDiv"></div>
  </div>
</div>

顯示模板（todoUpdate.html）：

    <div class="container-fluid">
  <div class="taskBox">
      <label for="taskName">Name</label>
      <input type="text" name="taskName" ng-model="task.taskname" placeholder="What needs to be done"/>
      <input type="button" ng-click="updateTodo()" class="btn btn-success" name="update" value="Update"/> //updateTodo(task). you can pass task to server with task id.
      <br>
      <button class="btn btn-warning" ng-click="closeEditBox()">Back</button>
  </div>

如何在angular js的同一位置用另一個HTML模板替換？

問題描述

1 個解決方案

解決方案1
0 2017-09-26 10:10:28

如何在angular js的同一位置用另一個HTML模板替換？

問題描述

1 個解決方案

解決方案1 0 2017-09-26 10:10:28

解決方案1
0 2017-09-26 10:10:28