javascript - 了解范围、ng-click 和 Angular 方式

Question

在编写电话教程时，我想知道如何实现这个用例

1. 用户点击了 add phone
2. 函数 addItem被解雇并且 phone.id通过
3. 检索到相关手机，数量增加1
4. 增加的数量应显示在输入中

你可以找到我的 codepen demo here 这是相关代码

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    <b>{{phone.name}} </b>
    <i ng-click="addItem(phone.id)"> add phone</i>
    <input name='{{phone.id}}' 
           value='{{phone.qty}}' 
           ng-readonly='{{phone.orderReadonly}}' /><br />        
    <p>{{phone.snippet}} </p>
  </li>
</ul>

和javascript

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
     {'id': 1, 'name': 'Mui 1'
             ,'snippet': 'Our newcomer from asia.' 
             ,'orderReadonly' : 'false', 'qty': 4}    
     ....
    ,{'id': 4, 'name': 'Msft Lumia™'
             ,'snippet': 'Who knows what windows 10 will bring'
             ,'orderReadonly' : 'true','qty': 2}
  ];
  $scope.orderProp = 'id';
  $scope.addItem = function(phone_id) {
     // from http://stackoverflow.com/questions/15610501/
     var found = $filter('filter')($scope.phones, {id: phone_id}, true);   
     if (found.length) {
       found[0].qty = found[0].qty + 1;
     } else {
         $scope.selected = 'Not found';
     }
  }
});

现状

• 传递 id 有效
• 找不到电话:var found = $filter('filter')($scope.phones, {id: phone_id}, true); // found in http://stackoverflow.com/questions/15610501/
• 增加数量不起作用

我的问题是

• 是否以及如何以 Angular 方式使用 onclick/ng-click
• 如何解决我的需求 - 在 <i>add phone</i> 上增加电话数量

Answer 1

我不知道为什么 qty 不起作用 - 它应该起作用，除非您的过滤器找不到匹配项。

但你甚至不应该这样做。与其传递对象的 id 然后定位对象以更改其属性，不如传递对象 phone 本身:

<i ng-click="addItem(phone)"> add phone</i>

然后，在 Controller 中，只需执行以下操作:

$scope.addItem = function(phone) {
  phone.qty = phone.qty + 1;
}