Angular Dynamic Table Column Adaptor

Recently, I came across the adpt-strap table lite and decided to experiment with it. Here is the JSfiddle link for the project I was working on: http://jsfiddle.net/cx5gm0sa/ My main goal was to dynamically hide or show a column. In my code, I added $scope.showColumn = true; (you can see the value of this on the html page, as I am displaying it at the top). Whenever the buy button on any row is clicked, the variable toggles between true and false.

$scope.buyCar = function (car) {
    $scope.showColumn = !$scope.showColumn
};

This variable also controls the visibility of the model column. However, when the variable changes, the column doesn't hide or show as anticipated. It only reflects the initial value the variable was assigned. Is there a way to achieve the dynamic behavior I was expecting, and does anyone know why it's not working that way?

Thank you in advance for any assistance.

javascriptangularjsadapt-strap

Answer №1

Understood. It seems that the issue with the table not updating is due to the controller not re-executing the code that defines the table when the Buy button is clicked. To address this, I have made a modification. Instead of directly assigning the array of configurations to $scope.carsTableColumnDefinition, I have created a function called getDefinition that returns the array. Subsequently, in the $scope.buyCar = function (car){}, I invoke this function.

Here are the modifications I implemented:

$scope.carsTableColumnDefinition = getDefinition();
...
//Inside the buyCar function:
$scope.buyCar = function (car) {
   $scope.showColumn = !$scope.showColumn;
   //Refresh by calling the getDefinition function:
   $scope.carsTableColumnDefinition = getDefinition();
};
..
//Below is the getDefinition function:
function getDefinition(){
    return [
      {
        columnHeaderDisplayName: 'Model',
        displayProperty: 'name',
        sortKey: 'name',
        columnSearchProperty: 'name',
        visible: $scope.showColumn
      },
      {
        columnHeaderTemplate: '<span><i class="glyphicon glyphicon-calendar"></i> Model Year</span>',
        template: '<strong>{{ item.modelYear }}</strong>',
        sortKey: 'modelYear',
        width: '12em',
        columnSearchProperty: 'modelYear'
      },
      {
        columnHeaderTemplate: '<span><i class="glyphicon glyphicon-usd"></i> Price</span>',
        displayProperty: 'price',
        cellFilter: 'currency',
        sortKey: 'price',
        width: '9em',
        columnSearchProperty: 'price'
      },
      {
        columnHeaderDisplayName: 'Buy',
        templateUrl: 'src/tablelite/docs/buyCell.html',
        width: '4em'
      }
    ];
    }

You can view the changes in the updated jsfiddle.

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

Sending an ArrayBuffer from Angular to Electron results in the window crashing

In my Electron application, I have integrated an Angular application internally. I am trying to download a byte array (ArrayBuffer) via an API call and then passing this data to a method connected through electron.remote.require('./file-service') ...

javascriptangularelectronarraybufferelectron-window

Move the Form to the Top of the Window and Highlight the First Input Field

There's a link in the header that says "Let's chat": <div class="letstalk"> <a href="javascript:scrollForm();"> Let's chat <img src="/wp-content/uploads/link-icon.png"> </a> </div> ...

javascripthtml

NodeJs took an unexpected turn

I’m encountering an issue with an http request to forecast.io. When I make a normal request using $.ajax, everything works fine. However, when I try using the ajax-request module, I receive the following output: SyntaxError: Unexpected token u in JSON at ...

javascriptjsonajaxnode.jsnpm

Uncovering secret divs with the power of jQuery timing upon reload

Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page. To achieve this functionality, I am uti ...

javascriptjquerycsswordpress

problem arising from the origin preventing me from utilizing localStorage in conjunction with JSDOM

Currently, I am facing an issue while trying to load a webpage in a node environment using JSDOM. The webpage relies on localStorage for its functionality. I have attempted to load the webpage by utilizing JSDOM's URL configuration option and accessi ...

javascriptnode.jsjsdom

Difficulty with conflicting styles when dynamically loading components in Nuxt3

I'm facing a challenge with my Nuxt 3 application where I need to dynamically load different Header components for Mobile and Desktop devices. I have created Header.vue and MobileHeader.vue for this purpose, and want to display them based on the dev ...

javascriptvue.jsnuxtjs3nuxt3

REACT Issue: Unable to Select Dropdown Option with OnChange Function

I have a component that includes a select element. Upon clicking an option, the OnProductChange function returns the value. However, my e.target.value shows as [Object Object]. Yet, {console.log(product)} displays: {id: 1, name: "VAM"} Clicking on Add L ...

javascriptreactjs

Issue: Undefined onClick function for HTML when using Node.js, NPM, and Parcel

I am currently working on a weather application using Node.js, NPM, and Parcel for development. To ensure OpenLayers functions properly, I need to incorporate these technologies, even though I'm not very familiar with them. One key aspect of my proje ...

javascriptnode.jsinputnpmparceljs

Expanding a JSON data structure into a list of items

In my Angular service script, I am fetching customer data from a MongoDB database using Django: getConsumersMongodb(): Observable<any> { return this.httpClient.get(`${this.baseMongodbApiUrl}`); } The returned dictionary looks like this: { &q ...

javascriptjsondjangoangulartypescript

What is the method to designate the initial value of a <select> tag within a React component?

I am working with a basic <select> element that is looping through a set of options: <select onChange={(event) => this.setState({selectedOption: event.target.value }) }> { this.state.options.map(option => <option key={option.label} ...

javascriptreactjsfrontend

Is there a way to transform the searchParams function into an object? Changing from URLSearchParams { 'title' => '1' } to { title : 1 }

Is there a way to convert the searchParams function into an object, transforming from URLSearchParams { 'title' => '1' } to { title : 1 }? I need this conversion to be applied for all values in the URLSearchParams, not just one. Cur ...

javascriptnode.jsnext.js

jQuery fadeIn effect happening at rapid speed

I am currently working on integrating ajax with WordPress. After the ajax call is completed, I am successfully fading out a specific div slowly. However, when trying to fade in the new data using jQuery's fadeIn() method, I noticed that regardless of ...

javascriptjqueryajaxwordpress

Flattening an array of Map in Typescript involves combining all the

I am working with an array containing entries of type Map<string, number> Is there a way to flatten this array into a single map? Map<string, number>[] converted to Map<string, number> Appreciate any help on this matter. ...

javascripttypescriptflatten

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

javascriptjqueryhtmlcss

Securing page access with a straightforward password protection using Flask

Looking for a straightforward way to add password protection to a Flask app site. I've explored options like flask_login, but they seem overly complex for my needs. I don't need high security or login sessions - just something like: "enter passw ...

javascriptpythonflask

Challenge with Context Api state not reflecting the latest changes

Hey there, I've got this function defined in AuthContext.js: let [authTokens, setAuthTokens] = useState(null) let [user, setUser] = useState(false) let [failedlogin, setFailedlogin] = useState(false) let loginUser = async (e) => { ...

javascriptreactjsnext.js

AngularJS and Select2's Multiple - Tags feature can display tags intermittently, showing some and hiding others as needed

Currently, I am implementing AngularJS along with select2 (not using ui-select). In my view, the following code is present: <select name="rubros" id="rubros" class="select2 form-control" ng-model="vm.comercio.tags" ng-options="rubro.nombre for rub ...

javascriptangularjstagsjquery-select2jquery-select2-4

Creating an HTML file using PUG in a local environment (using npm and gulp)

Is there a way to automatically generate an HTML file with the same name as my Pug file whenever I save using gulp? I've checked all the documentation on but it only explains how to return Pug content in console... ...

javascripthtmlnpmgulppug

Ensuring that a service is completely initialized before Angular injects it into the system

When Angular starts, my service fetches documents and stores them in a Map<string, Document>. I use the HttpClient to retrieve these documents. Is there a way to postpone the creation of the service until all the documents have been fetched? In ot ...

javascriptangulartypescripthttpfetch

Exploring the capabilities of batch updates in Firestore with the latest web version-9

I am facing issues when trying to update certain values in my firestore collection within my nuxt project. const batch = writeBatch(firestore); const data = query(collection(firestore, `notifications`, `${uid}/news`)); const querySnapshot = await ...

javascriptfirebasevue.jsgoogle-cloud-firestorenuxt.js