AngularJs-ng-repeat中的执行函数

Question

我的Web应用程序应从服务器获取图像，将其显示并给予投票赞成或不喜欢的可能性。 投票将存储在数据库中。

我的控制器：

$scope.beginSearch = function () {
    $http
       .get("http://example?q=" + $scope.search )
       .then(function (response) {
            $scope.url = response.data.data;
            });
};

<tr ng-repeat="x in url">
   <th>
     <img src="{{x.images}}"></img>
     <div class="well">
         <i class="fa fa-thumbs-o-up fa-2x vertical-align" ng-click="vote_up(x.id)"></i>
         <i class="fa fa-thumbs-o-down fa-2x vertical-align" ng-click="vote_down(x.id)" ></i>
     </div>
   </th>
</tr>

我希望在每个ng-repeat中使用一个函数，该函数会返回

{{ return_vote(x.id)}}

但这是行不通的，据我所知，如果它们不在ng-click函数中，则不应在html中使用这些函数。

ng-init也无效。

谁能提供帮助，我该如何解决我的问题？

图片在某些网站上，我只是使用其WEB-API来获取，因此它们没有用于投票的API，我需要自己做。

Answer 1

您可以在方括号{{yourFunction(x.id)}}调用函数，并添加逻辑以获取内部投票。

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.url = [{ images: "http://lorempixel.com/g/100/100/", id: 1 }, { images: "http://lorempixel.com/100/100/", id: 2 }] $scope.getVotes = function(id){ //logic to get number of votes return id * 5; } $scope.vote_up = function(id){ console.log("Vote up id " + id); } $scope.vote_down = function(id){ console.log("Vote down id " + id); } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="x in url"> <img src="{{x.images}}" /> <p>{{getVotes(x.id)}} votes</p> <i class="fa fa-thumbs-o-up fa-2x vertical-align" ng-click="vote_up(x.id)"></i> <i class="fa fa-thumbs-o-down fa-2x vertical-align" ng-click="vote_down(x.id)"></i> </div> </body>

Answer 2

感谢您的回答。

$scope.vote_get = function (id) {

    $http({
        method: "GET",
        url: "vote.php",
        data: {
            'id': id
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}

    })
        .then(function (response) {
            return response.data;
        });
};

当我使用此功能获得选票或返回任何东西时，它会无限循环。 也许我试图以错误的方式进行操作，然后请给我提示如何操作。 我敢肯定，我需要将图像ID发送到.php文件，该文件将连接到数据库并返回所提供ID的投票。

Vote_up和Vote_down函数是相同的，它们只是POST数据，但似乎可以正常工作。

谢谢

所以，没人知道:(？

Answer 3

由于您无法在API中获得投票，因此可以选择创建一个服务以一次获取所有投票，然后创建一些逻辑以将它们与图像匹配。

例如

$scope.images = [];
var votes = [];

activate();

function activate() {
    getImages().then(function () {
        getVotes().then(function () {
            matchVotesToImages();
            //Now we have a property 'votes' in each image object which we can use in ng-repeat
        });


    });
}


function getVotes() {
    var deferred = $q.defer();
    $http.get('theUrl').then(success, fail);

    function success(res) {
        votes = res;
        deferred.resolve();
    }

    function fail(res) {
        console.log("Error");
        console.log(res);
    }

    return deferred.promise;
}

function getImages() {
    var deferred = $q.defer();
    $http.get('theUrl').then(success, fail);

    function success(res) {
        $scope.images = res;
        deferred.resolve();
    }

    function fail(res) {
        console.log("Error");
        console.log(res);
    }

    return deferred.promise;
}

function getIndex(array, property, valueToCompare) {

    var i = 0;
    var len = array.length;

    for (i; i < len; i++) {
        if (array[i][property] == valueToCompare) {
            return i;
        }
    }
    return -1;
}

function matchVotesToImages() {
    var i = 0;
    var len = $scope.images.length;

    for (i; i < len; i++) {
        //We pick need the votes of this specific image so
        var indexAtVoteArray = getIndex(votes, 'id', $scope.images[i].id);
        if (indexAtVoteArray != -1)
            $scope.images.votes = votes[indexAtVoteArray];
        else
            $scope.images.votes = 0;
    }
}

AngularJs-ng-repeat中的执行函数

问题描述

3 个解决方案

解决方案1
1 2016-12-15 14:31:31

解决方案2
0 2016-12-15 17:08:05

解决方案3
0 已采纳 2016-12-16 20:18:20

AngularJs-ng-repeat中的执行函数

问题描述

3 个解决方案

解决方案1 1 2016-12-15 14:31:31

解决方案2 0 2016-12-15 17:08:05

解决方案3 0 已采纳 2016-12-16 20:18:20

解决方案1
1 2016-12-15 14:31:31

解决方案2
0 2016-12-15 17:08:05

解决方案3
0 已采纳 2016-12-16 20:18:20