Question

我正在开发一个TODO app.I有一个模板，可以从index.html（todoTemplate.html）获取ui-view：

    <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>

这是我想要用id（todoUpdate.html）代替上面的div显示的模板：

    <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);
}]);

目前执行后我会这样： 简单地说，我想将todoUpdate.html显示在todoTemplate.html相应点击链接的确切位置，我应该能够编辑内容并调用API来更新数据。
看看这个演示，你会明白： https://todo-vue.herokuapp.com/

请帮助我这样做，非常感谢。

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

尝试如下..

 <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>

如何在角度js中的相同位置替换HTML模板？

1 个答案: