Question

目标：像按钮只使用Angular添加一次。

理论：Angular的一次性绑定可以解决问题。它适用于Angular Expression Doc和the Plunker example

问题：在我的试验中不起作用。

这是控制器信息（来自Codecademy的Book App练习）

  $scope.products = [
{ 
    name: 'The Book of Trees', 
    price: 19, 
    pubdate: new Date('2014', '03', '08'), 
    cover: 'img/the-book-of-trees.jpg',
    likes: 0,
    dislikes: 0
}, 
{ 
    name: 'Program or be Programmed', 
    price: 8, 
    pubdate: new Date('2013', '08', '01'), 
    cover: 'img/program-or-be-programmed.jpg',
    likes: 0,
    dislikes: 0
}

查看试用版1

    <div ng-repeat="product in products" class="col-md-6"> 
      <div class="thumbnail"> 
        <img ng-src="{{ product.cover }}"> 
        <p class="title">{{ product.name }}</p> 
        <p class="price">{{ product.price | currency }}</p> 
        <p class="date">{{ product.pubdate | date }}</p> 

        <div class="rating">
          <p class="likes" ng-click="plusOne($index)">+ {{ ::product.likes}} </p> <!-- here's the damn pickle of a problem -->
          <p class="dislikes" ng-click="minusOne($index)">+ {{ product.dislikes }} </p>
        </div>

      </div> 
    </div>

结果 - 按钮不添加

查看试用版2

    <div ng-repeat="product in products" class="col-md-6"> 
      <div class="thumbnail"> 
        <img ng-src="{{ product.cover }}"> 
        <p class="title">{{ product.name }}</p> 
        <p class="price">{{ product.price | currency }}</p> 
        <p class="date">{{ product.pubdate | date }}</p> 

        <div class="rating">
          <p class="likes" ng-click="plusOne($index)">+ {{ ::product.::likes}} </p> <!-- here's the damn pickle of a problem -->
          <p class="dislikes" ng-click="minusOne($index)">+ {{ product.dislikes }} </p>
        </div>

      </div> 
    </div>

结果 - 没有内容显示，只有把手/胡须/把手 - 胡须{{}}

Answer 1

我尝试实现你的代码。以下适用于我：

＆＃13;

"^[^_]*_[^_]*_.*"

＆＃13;

由于产品是一个数组，我们需要迭代它的每个元素。

＆＃13;

<div ng-repeat = 'product in products'>
      <p ng-click="plusOne($index)"> + {{ product.likes}}</p>
      <p ng-click="minusOne($index)"> + {{ product.dislikes }}</p>
</div>

＆＃13;

只有当它为0时，我才会增加like的值。因此它只会增加一次。

Answer 2

这是我在您的代码中看到的快速错误。 1.删除双冒号（：:)并将您的+号更改为 - 。 见下方截图：

https://i.gyazo.com/ae9d8bb8be57a7b9e9cf840d3f1d705b.png

另外，请勿忘记在示波器上（在控制器中）附加加号和减号属性。

$scope.plusOne = function(index) { 
  $scope.products[index].likes += 1; 
};

$scope.minusOne = function(index) { 
  $scope.products[index].dislikes += 1; 
};

Answer 3

如果我理解正确，您希望用户只能＆＃34;喜欢＆＃34;或者＆＃34;不喜欢＆＃34;一次产品。

一次性绑定用于让视图仅在定义之前观察值，然后停止观看它。主要目的是在您绑定不会改变视图的数据时不添加额外的手表。

对于ng-click，不会使用$watch监视表达式，而是每次单击按钮时重新评估表达式。即使它只使用一次并且表达式只被评估一次，每次点击按钮时仍然会使用该表达式。

您需要跟踪用户是否已经＆＃34;喜欢＆＃34;产品与否。然后，您可以在plusOne和minusOne功能中检查这些功能，如果已经被解雇，只需将其短路。

或者，您可以简单地让plusOne和minusOne在触发后用空函数替换自己，如下所示：

$scope.plusOne = function(index) { 
  // Do stuff...

  // This function disables itself after it fires once
  $scope.plusOne = function() {};
};

对象键上的角度一次性绑定？一次性添加像按钮

3 个答案: