如何将子对象从ng-repeat传递到ng-click

时间:2015-04-22 04:25:37

标签: javascript angularjs

我希望之前的问题已经回答了这个问题,但看起来我在这里遇到了一些不同的东西,除非我错过了什么......

我理解ng-repeat创建了一个子对象,我们可以通过它调用{{note.id}}之类的东西。

我的问题是我试图将该note.id传递给ng-click

在代码下面有尝试和错误。

<div class="col-lg-3" ng-controller="mainCtrl">
  <div class="list-group">
    <a href="#notes/{{note.id}}"   class="list-group-item" ng-repeat="note in notes" >
      {{note.title}}
      <button ng-click="deleteNote(note.id)" class="btn btn-danger" >x</button>
    </a>
   </div>
</div

检查我们拥有的元素

<a href="#notes/5" class="list-group-item ng-binding ng-scope" ng-repeat="note in notes">
  hello update
  <button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>
</a>

如果我尝试的东西更像是angularjs sintax

<button ng-click="deleteNote({{note.id}})" class="btn btn-danger" >x</button>

在这种情况下,我的元素检查会显示正确的ID ...

<button ng-click="deleteNote(5)" class="btn btn-danger">x</button>

我有错误

Error: [$parse:syntax] http://errors.angularjs.org/1.2.19/$parse/syntax?p0=note.id&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=14&p3=deleteNote(%7B%7Bnote.id%7D%7D)&p4=note.id%7D%7D)

我无法分辨出错误来自消息或它带我的链接

语法错误:令牌'note.id'位于表达式[{3}]的第{2}列,从[{4}]开始。

控制器的代码

.controller('mainCtrl',['$scope', 'notesFactory', function($scope, notesService){

    $scope.notes = notesService.notesObjectInService;

    $scope.addNote = function(){
         if ($scope.title === "" ) {
                 return;
         }
         notesService.create({
             title: $scope.title
             body:$scope.body
         });
         $scope.title= '';
             $scope.body= '';
         };

     $scope.deleteNote = function(id) {
         notesService.delete(id);
         notesService.getAll();
     };
}])

2 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/p2t1waxp/2/

你的第一次尝试 <button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>

实际上有效,不是吗?

它只是在你检查它时不呈现id,但它在控制器中处理它,你可以在控制台中看到

答案 1 :(得分:0)

我很抱歉,但事实证明,按照假设做事的标准方法很好。 ng-click(note.id).. 我还没有完全实现我的功能,因为我正在使用Chrome工具进行调试检查元素,我期望id元素应该出现在检查中。一旦它没有像我在上面的代码中所示,我认为这是错误的。但是通过完成服务和后端的实现它实际上工作得很好。 这是我对开发人员工具不了解的事情。我仍然不明白的是为什么id没有出现在html检查中,如href =“#notes / {{note.id}}”....我假设它与{{{符号,但我没有确切的答案。如果有人可以解释它有助于我对angular和html的了解,因为我是编程新手。

谢谢并抱歉愚蠢的错误。