AngularJs - ng-repeat中的执行功能

我的Web应用程序应该从服务器获取图像，向他们展示并提供投票赞成或不赞成的可能性。投票将存储在数据库中。AngularJs - ng-repeat中的执行功能

我的控制器：

$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重复的功能，这将返回票样

{{ return_vote(x.id)}}

但它不工作，并作为远远我看到，如果不在ng-click函数中，我不应该在html中使用函数，。

ng-init也不起作用。

任何人都可以提供帮助，我该如何解决我的问题？

图片在一些网站上，我只是通过使用他们的WEB-API获得它们，所以他们没有投票API，我需要自己做。

来源

2016-12-15 Legaldirectmoney

背后是什么'vote_up（x.id）'？ –

你需要在这个问题上提供控制器。你问因为有可能，有几种方法可以做到这一点。 –

你需要与我们分享你的控制器，所以我们可以帮助你。 :) –

既然你不能在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; 
    } 
}

来源

2016-12-16 20:18:20 Korte

您可以在括号{{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>

来源

2016-12-15 14:31:31 Weedoze

是的，我做到了你在这里写了什么，但它做了一个无限循环:( – Legaldirectmoney

谢谢回答。

$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数据，但似乎工作正常。

感谢

因此，没有人有想法:(？

来源

2016-12-15 17:08:05 Legaldirectmoney

AngularJs - ng-repeat中的执行功能

回答

相关问题