了解范围、ng-click 和 angular-方式

Question

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

用户点击 add phone
函数 addItem 被触发并且 phone.id 被传递
检索到相关phone，数量增加1
增加的数量应该在输入中显示

你可以找到我的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 
     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 有效
查找 phone 无效：var found = $filter('filter')($scope.phones, {id: phone_id}, true); // found in
增加数量不起作用

我的问题是

是否以及如何以 angular 方式使用 onclick / ng-click
如何解决我的需求 - 增加 phone 数量点击 <i>add phone</i>

Answer 1

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

但你甚至不应该这样做。而不是传递对象的 id 然后定位对象以更改其属性，只需传递对象 phone 本身：

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

然后，在控制器中，只需执行以下操作：

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

Answer 2

回答你的第一个问题：

使用 ng-click 在 Angular 的范围内运行一个 angular 表达式。如果您使用 onclick 只需运行 javascript 代码。

因此，如果您在控制器中初始化了一些变量 'numPhones'，那么您可以：

ng-click="numPhones = numPhones + 1"

并且 numPhones 变量将递增。

另一方面：

onclick="numPhones = numPhones + 1"

不引用周围的 angular 范围。

因此，如果您使用 Angular，您可能根本不需要 onclick。

这是一个例子：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
        angular.module('phones', [])
    </script>
</head>
<body ng-app='phones'>
    <div>
        {{ numPhones }}
        <button ng-click="numPhones = numPhones + 1"> add 1</button>
    </div>
</body>
</html>

Answer 3

总结以上两个答案。 "++" 增量不适用于 "ng-click" 指令中的变量或对象属性，因此您应该使用：

variable = variable + 1

关于原始问题

<i ng-click="phone.qty = phone.qty + 1"> add phone</i>

会成功的。

了解范围、ng-click 和 angular-方式

Understanding scope, ng-click and the angular-way

javascript

angularjs

angularjs-scope

angularjs-ng-click

当前状态

我的问题是