当ng-repeat item.length = 1时,在ng-repeat内触发ng-click

时间:2017-05-24 12:05:19

标签: javascript jquery angularjs

我想在products.length==1

时触发自动loadProduct函数

Bellow my angular code。

<div class="prodItem prodItem-nos-{{products.length}} prodItem-item-number-{{$index}}"
    ng-repeat="product in products track by $index"
    ng-click="loadProduct(product.id)"
    uib-tooltip="{{ product.name }}">

    <div class="prodMeta">    
        <div class="prodName" ng-bind="product.name"></div>
        <div class="prodDescr" ng-bind="product.description"></div>
    </div>  
    <div class="prodBuyNow">
        <button ng-click="loadProduct(product.id)">Choose</button>
    </div>
</div> 

4 个答案:

答案 0 :(得分:1)

如果要在范围内的项目更改时触发功能,可以使用范围。$ watch()

例如:

scope.$watch('products',function(oldValue,newValue){
            if(newValue.length === 1){
               executeFunction();
            }
    });

参见: https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

答案 1 :(得分:0)

ng-click="if(products.length === 1){ loadProduct(product.id); }"

我不喜欢ng-click中的太多条件。作为范围变量的产品,您可以在loadProduct函数中添加此逻辑,在开头添加条件,如

if($scope.products.length === 1)

然后执行您的代码。

答案 2 :(得分:0)

如果您要拨打loadProduct()只有一个产品在api中调用它来获取产品

<强>例如

$http.get("/api/products")
    .then(function(response) {
        $scope.products = response.data;
        if($scope.products.length == 1)
        {
            $scope.loadProduct($scope.products[0].id)
        }
});

答案 3 :(得分:0)

你可以使用ng-init功能 并在功能

中检查您的产品清单
<div ng-repeat="product in products track by $index" ng-init="yourFunctionName()">
<div class="prodMeta">    
 <div class="prodName" ng-bind="product.name"></div>
 <div class="prodDescr" ng-bind="product.description"></div>
 </div>  
   <div class="prodBuyNow"><button ng-click="loadProduct(product.id)">Choose</button></div>
</div> 
</div>