Question

我正在为一堆动态卡开发一个upvote / downvote控制系统。

我可以控制，如果我点击img checked = true和checked = false值，但我找到的问题，因为我的代码无法按预期工作，我无法更新我的值在ng-model中，所以下次调用该函数时，我会收到相同的值。同样，我无法更新并正确显示新值。同样，唯一可行的卡是第一张（它不是动态的）

我可以在plunk找到我工作过的所有内容。

作为一个非常新的角色，我试图尽可能地调查和阅读，但我甚至不能100％确定这是正确的方式，所以我完全乐于其他方式这样做，参加性能和清洁代码。在这里，我粘贴了我实际取得的成果：

的index.html

<card-interactions class="card-element" ng-repeat="element in myIndex.feed">
  <label class="rating-upvote">
    <input type="checkbox" ng-click="rate('upvote', u[element.id])" ng-true-value="1" ng-false-value="0" ng-model="u[element.id]" ng-init="element.user_actions.voted === 'upvoted' ? u[element.id] = 1 : u[element.id] = 0" />
    <ng-include src="'upvote.svg'"></ng-include>
    {{ element.upvotes + u[1] }}
  </label>
  <label class="rating-downvote">
    <input type="checkbox" ng-click="rate('downvote', d[element.id])" ng-model="d[element.id]" ng-true-value="1" ng-false-value="0" ng-init="element.user_actions.voted === 'downvoted' ? d[element.id] = 1 : d[element.id] = 0" />
    <ng-include src="'downvote.svg'"></ng-include>
    {{ element.downvotes + d[1] }}
  </label>
  <hr>
</card-interactions>

index.js

'use strict';

var index = angular.module('app.index', ['index.factory']);

index.controller('indexController', ['indexFactory', function (indexFactory) {

    var data = this;

    data.functions = {
      getFeed: function () {
        indexFactory.getJSON(function (response) {
          data.feed = response.index;
        });
      }
    };

    this.functions.getFeed();
  }

]);

index.directive('cardInteractions', [ function () {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      scope.rate = function(action, value) {
        var check_up = element.find('input')[0];
        var check_down = element.find('input')[1];
        if (action === 'upvote') {
          if (check_down.checked === true) {
              check_down.checked = false;
          }
        } else {
          if (action === 'downvote') {
            if (check_up.checked === true) {
              check_up.checked = false;
            }
          }
        }
      }
    }
  };
}]);

希望你们能帮助我。每个贡献都表示赞赏。

感谢您的建议。

Answer 1

我在这个plunker中更新了你的指令， https://plnkr.co/edit/HvcBv8XavnDZTlTeFntv?p=preview

index.directive('cardInteractions', [ function () {
  return {
    restrict: 'E',
    scope: {
      vote: '='
    },
    templateUrl: 'vote.html',
    link: function (scope, element, attrs) {

      scope.vote.upValue = scope.vote.downValue = 0;

      if(scope.vote.user_actions.voted) {
        switch(scope.vote.user_actions.voted) {
          case 'upvoted':
            scope.vote.upValue = 1;
            break;
          case 'downvoted':
            scope.vote.downValue = 1;
            break;
        }
      } 

      scope.upVote = function() {
        if(scope.vote.downValue === 1) {
          scope.vote.downValue = 0;
          scope.vote.downvotes--;
        }

        if(scope.vote.upValue === 1) {
          scope.vote.upvotes++;  
        } else {
          scope.vote.upvotes--;
        }
      };

      scope.downVote = function() {
        if(scope.vote.upValue === 1) {
          scope.vote.upValue = 0;
          scope.vote.upvotes--;
        }

        if(scope.vote.downValue === 1) {
          scope.vote.downvotes++;  
        } else {
          scope.vote.downvotes--;
        }
      };
    }
  };

控制upvotes和downvotes

1 个答案: