在点击时从ngrepeated div获取数据到另一个div

时间:2016-10-18 19:46:35

标签: javascript angularjs angularjs-scope angularjs-ng-repeat angularjs-ng-click

<div ng-app="appPage" ng-controller="appController">
    <div class="nav">
      <h1 class="logo">Todlio</h1>
      <a href="setting.html"><i class="icon setting" style="color:#fff;font-size:1.8em;;position:absolute;top:11px;right:12px;"/></i></a>
    </div>
    <div class="todo">
      <div class="todo_column">
        <div style="font-weight700;text-align:center; margin:20px;">
          <a href="#/add" ng-click="addTodo()" class="ui basic button">
            <i class="add square icon"></i>
            Add
          </a>
        </div>
        <ul>
          <a href="#/"><li ng-href="#/" ng-click="detail($index)" ng-repeat="todo in todos">
            <h3 ng-model="title">{{ todo.title }}</h3>
            <h6>{{ todo.note_date }}</h6>
          </li></a>
        </ul>
      </div>
      <div class="todo_full">
        <div class="todo_title" ng-scope="todo in todos">
          <span><h1>{{ title }}</h1></span>
          <span class="check">
            <i style="font-size:2em;" class="square outline icon"></i>
            <a href="#/edit"><i class="write icon" style="font-size:1.8em;"></i></a>
          </span>
        </div>

        <h4>Note:</h4>

        <p class="todo_note">{{ note }}
        </p>

      </div>
    </div>

  </div>

控制器

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

  $scope.detail = function(x){
    $scope.todos.title = $scope.title;
    $scope.todos.note = $scope.note;
  };

我想将点击的列表项目标题和附加的注释添加到下面的不同div中 任何人都可以帮忙。它是一个todo应用程序,左半部分有todos列表,右半部分有一个附加说明或任何检查或不检查。

1 个答案:

答案 0 :(得分:0)

有几种方法可以做到这一点。一个简单的方法如下:

  1. 使用$ scope.currentTodo。
  2. 这样的名称定义$ scope变量
  3. 在重复循环中,ng-click将设置$ scope.currentTodo = todo
  4. 此当前变量将保留todo对象,以便您可以使用{{$ scope.currentTodo.title}}代替{{title}}
  5. 抛弃ng-scope