2016-09-15 60 views
0

我在角JS是新的,角JS动态HTML工作不

NG单击我想打一个NG单击事件从PHP动态进行HTML,这里是代码。

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

angular.module('pageapp') 
.filter('to_trusted', ['$sce', function($sce){ 
    return function(text) { 
     return $sce.trustAsHtml(text); 
    }; 
}]); 

app.controller('productList',function($scope,$http){ 
    $http.get("../webservice/api/get-products") 
    .success(function(response){ 
    $scope.products = response.data; 
    $scope.paginationLinks = response.links;   
}); 

$scope.getPageData = function() { 
    alert("Hello"); 
} 
}); 

HTML ...

<section ng-controller="productList"> 
<table class="table table-responsive table-hover"> 
    <thead> 
     <tr> 
      <th>S.No</th> 
      <th>Name</th> 
      <th>Color</th> 
      <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="product in products"> 
      <td>{{$index + 1}}</td> 
      <td>{{product.name}}</td> 
      <td>{{product.color}}</td> 
      <td>{{product.price}}</td> 
     </tr> 
    </tbody> 
</table> 
<ul class="pagination pull-right" ng-bind-html="paginationLinks|to_trusted""></ul> 
</section> 

PHP ..

public function Products(){ 
    $start = 0; 
    $perPage = 10; 
    $count = DB::table('products')->count(); 
    $totalPages = ceil($count/$perPage); 
    $data = DB::table('products') 
      ->select('name','price','color') 
      ->take($perPage) 
      ->skip($start) 
      ->get(); 

    for ($i=1; $i <= $totalPages; $i++) { 
     if($i == 1) 
      $links ="<li><a href=''>".$i."</a></li>"; 
     else 
      $links .="<li><a href='' ng-click='getPageData(".$i.")'>".$i."</a></li>"; 
    } 

    return [ 
     'totalpages' =>$totalPages, 
     'data'   =>$data, 
     'links'   =>$links 
    ]; 
} 

回答

1

而是在PHP中加入ng-click='getPageData(".$i."),加 ng-click="getPageData($event)"UL元素在你的HTML。因此,您可以在您的JS中获得单击的元素(通过事件冒泡),并且您可以执行任何您想要的操作。

希望它有帮助:)