如何使用angullarjs隐藏或禁用特定用户配置文件中的特定ng-repeat div?

时间:2015-09-11 12:06:32

标签: javascript jquery angularjs

我创建了3个优惠券.1个适用于10个用户,第2个适用于5个用户,第3个适用于20个用户。在用户页面中,我使用ng-repeat.if列出了激活按钮的优惠券用户激活优惠券我已经在一张桌子中存储了优惠券ID和优惠券,并且我减少了优惠券的数量,例如用户激活的第一优惠券(10)我减少了1和9优惠券保持其工作正常。期望:如果用户激活优惠券我想从他/她的个人资料中删除ng-repeat中激活的优惠券div,或者我需要更改按钮状态激活和禁用链接

.controller('CouponsCtrl', ['$scope', '$http', '$window', '$location', '$ionicPopup','$ionicLoading',
    function($scope, $http, $window, $location, $ionicPopup,$ionicLoading) {  
       $scope.find = function() {
          $http.get('').success(function(data, dealers, response) {
              $scope.coupons = data;  
          });
       }
    }
])
<div class="list card" data-ng-repeat="coupon in coupons |  filter:couponquery ">

  <div class="item item-body" style="padding:10px;">
    <img class="full-image" ng-src="{{coupon.Coupon_Image}}">
    <p style="color:green;font-weight:700">
    {{coupon.Store_Name}}
    </p>
   <p style="font-weight:700">{{coupon.Offer_Meassage}}</p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left" >
    <a class="tab-item" ng-click="apply(coupon._id,coupon.Store_ID)" id="appcolor">
      <i class="icon ion-checkmark-circled" ></i> 
      Activate
    </a>
  </div>
</div>

在那个特定的个人资料中,任何人帮助我。我是这项技术的新手,不要放弃我的plunkar http://jsfiddle.net/sreemohan143/U3pVM/18537/

2 个答案:

答案 0 :(得分:0)

你走了,希望它有帮助......                   学生名单         
                          
        
        
        
        

    <div ng-repeat="coupon in coupons | filter:search | filter:{'activated':false}" style="border-radius:5px;background: #8AC007;padding: 20px;">
        <br>{{coupon.couponname}}
        <br>
        <br>{{coupon.offermessage}}

     <a class="tab-item" ng-click="activate(coupon)" id="appcolor">
  <i class="icon ion-checkmark-circled" ></i> 
  Activate
</a>
    </div>
</div>
<BR>
<BR>

angular.module('myApp', [])
.controller("myCntrl", function ($scope) {

$scope.coupons = [{

    id: "1",
    couponname: "healthy breakfast offer",
    offermessage: "50% offer for break fast",
    noofcoupon: "10",
    activated: false
}, {
     id: "2",
    couponname: "get 50% lunch",
    offermessage: "50% offer for Lunch",
    noofcoupon: "10",
    activated: false
}, {
     id: "3",
    couponname: "dinner damaka",
    offermessage: "50% offer for dinner",
    noofcoupon: "10",
    activated: false
}

]

 $scope.activate = function(coupon) {
coupon.noofcoupon--;
coupon.activated = true;
 }

})

http://jsfiddle.net/712u24m2/

答案 1 :(得分:0)

您可以使用ng-show确定它是否已激活,并在优惠券对象中添加激活的密钥。

并在html ng-show= !activated

在点击功能中,您可以更改激活的属性

更新了小提琴http://jsfiddle.net/42ckr88y/4/