What are the best methods for concealing a ng-repeat element with AngularJS?

.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>

i have created 3 discounts.1st one is valid for 10 customers,2nd one is valid for 5 customers and 3rd one is valid for 20 customers.In user profile, I have displayed the promotions with an activate button using ng-repeat. Once a customer activates a discount, its details are stored in a table and the count of available discounts decreases by 1. For example, if a user activates the 1st promotion, the count (10) is reduced to 9 remaining promotions, which is functioning correctly. Expectation: After a customer activates a discount, I want to remove it from the ng-repeat in their profile or change the button status to "Activated" and disable the button in that specific profile.

Fiddle: http://jsfiddle.net/sreemohan143/U3pVM/18537/

Answer №1

Sort your discounts by identifier after selecting the activate link

Check out the latest Fiddle

Your activation function :

$scope.activate = function(discount) {
    if(discount.discountType.indexOf("summer") !== -1)
        discount.quantity--;
    if(discount.discountType.indexOf("winter") !== -1)
        discount.quantity--;
    if(discount.discountType.indexOf("spring") !== -1)
        discount.quantity--;

    if(discount.quantity === 0){
        $scope.discounts = $scope.discounts = $filter('filter')($scope.discounts,function(value, index, array) {
             return value.identifier !== discount.identifier;
         });
     }
 }

Answer №2

If you want to hide activated coupons, you can utilize the ng-hide directive.

<div ng-repeat="coupon in coupons" ng-hide="coupon.activated"> 
... 
</div> 

Check out the latest fiddle link for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there an implicit transformation or action involved when the promise chain is resolved or rejected in $q?

Is there an intrinsic digest/apply included when the promise chain is resolved/rejected in $q? I recently switched from using $q to q in my code and it seems like a digest is no longer happening, leading to different outcomes. What could be causing this c ...

Troubleshooting broken links on a multi-page website built with node.js and ejs

I am encountering some difficulties with my multi-page website created in node.js/ejs. I suspect that the issue lies within the routing mechanism, although I have double-checked my routes and they seem to be configured correctly. The problem arises when I ...

Cross-site communication with Ajax using both POST and GET requests

As a beginner in JavaScript, I'm facing challenges with implementing ajax POST and GET requests. While I can successfully do it using Google Postman as shown here https://i.sstatic.net/Cegxj.pnghttps://i.sstatic.net/ovJT0.png, the problem arises when ...

The React DevTools display components with the message "Currently Loading."

I am currently facing an issue with debugging some props used in my React application. When I try to inspect certain components, they display as "Loading..." instead of showing the normal props list: https://i.sstatic.net/RtTJ9.png Despite this, I can con ...

Issue with the submission button not triggering onclick event correctly

I've been trying to add an onclick event to a submit button. I've searched various tutorial sites and followed all the suggestions, but none of them have solved the issue. Interestingly, when I include an alert in the function being called, it wo ...

A guide on initiating a get request with URL in React

Utilizing React for the frontend and express for the backend has been my approach. By defining get methods in my express like this:- app.get('/addBill',(req,res)=>{ // --first method res.render("addBill"); }); app.get(&a ...

Encountering an error while trying to add text: SyntaxError - Unexpected token 'for

I'm trying to print out the elements of an array using JavaScript. let listToArray = ["a","b","c"]; $(".tooltip").append(for(let i = 0; i < listToArray.length; i++) {listToArray[i]}); But I keep getting an error that says Uncaught SyntaxError: U ...

Tips for sending textarea data via AJAX with TinyMCE

Recently, I encountered an issue with submitting forms using the TinyMCE Jquery plugin. While regular input fields like text fields and select boxes submit just fine, there seems to be a glitch when it comes to submitting a textarea with TinyMCE. It requir ...

Is the order of query execution being altered when using the MongoClient in Node.js?

I am currently developing a registration API endpoint that utilizes MongoDB to validate two specific conditions: If the username provided already exists in the database, it will return a status of 500 If the email address provided already exists in the da ...

Can the chrome console be used to showcase the contents of objects?

When I have a line of code, and I try to output it to the console, I only see [object Object] instead of the actual object types. console.log(`%c ${args[args.length-1]} ${performance['now'](true, args[args.length-1])} [(${args.slice(0, args.leng ...

Learn how to extract substrings from a variable within an API using Vue.js

Exploring VueJs for the first time and looking to split a string by comma (,) retrieved from an API into separate variables. The data is coming from a JSON server. "featured-property": [ { "id": "1", " ...

Utilizing ExtJS and its control feature

I am facing an issue with the following code block: run: function(e, row){ var me = this; var container = Ext.getCmp('centercontainer'); try { container.removeAll(); } catch(e) { } // The code snippet below is act ...

There was a TypeError encountered while trying to read properties of undefined in Next.js version 13

I've encountered a problem in the title with my post API endpoint that I created in Next.js. The purpose of my endpoint is for form submission, where I gather inputs and send them to my email. Currently, my code successfully sends the email and I rec ...

What is the correct way to change the v-model value of a child component within a parent component

Currently, I am in the process of mastering Vue.js and I have a specific goal. I want to modify the binding value of the child component's v-model and then trigger an event in the parent component. As I delve into the Element UI documentation, I aim ...

Utilizing a JavaScript variable in Jquery for managing an mp3 playlist

I am working on implementing an album feature for the jPlayer that is already in use. Here is the current static code: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplayer_1", cssSele ...

Encountering issues with the setValue function in Nightwatch

Currently, I am in the process of setting up a new Nightwatch project to automate a basic Google search page. The assertion for searchbox present on page is successful, but I am facing difficulties performing any mouse or keyboard actions on the elements ( ...

What steps are involved in setting up a local server on my computer in order to create an API that can process http requests from Flutter?

New to API creation here, so please be patient. I plan to eventually host my API on a more robust server, but for now, I want to get started by setting something up locally on my PC to work on backend functions. The API goals include: Verify incoming requ ...

Prevent tab switching from occurring by disabling click functionality on tabs

I've got different tabs set up in a similar way <md-tabs md-selected="selectedTab()"> <md-tab label="General"></md-tab> <md-tab label="Type"></md-tab> <md-tab label="Details"></md-tab> </md-tab ...

Trigger an event upon completion of a write operation in AngularJS

I want to trigger a search after my user finishes typing (without hitting enter) in AngularJS. Here is a simplified version of my HTML: <div ng-class="input-append" ng-controller="searchControl"> <input type="text" ng-model="ajaxSearch" ng-cha ...

Change your favicon dynamically based on the user's online or offline status using Vue

I am currently working on setting up different icons to display when my browser is online (normal logo) and offline (greyed out logo). With Vue JS, I am able to detect the online and offline states, as well as set different favicons accordingly. However, t ...