Selecting options in table is disrupted by filtering in ng-repeat

My table showcases selectable information, featuring parent rows and child rows.

I am seeking a solution where only the parent rows are selectable if they have no children; otherwise, only the child rows should be clickable. Essentially, it's a select-only-one type of table.

You can see the functioning mechanism in this Plunker:

http://plnkr.co/edit/x7D3aTOR8vrJ3Z6Menli?p=preview

However, I need to apply some data filtering. To achieve this, I've added a filter as shown below:

ng-repeat-start="(pIndex, x) in pro | filter:{ f: '!B'} | filter:{ f: '!C'}"

The plunker with the filter applied can be accessed here: http://plnkr.co/edit/xDo5kLsUzIILK4nVyWsa?p=preview

Unfortunately, this filter breaks the selection functionality. If you compare the options in the first Plunker to those in the second one, you'll notice the issue. What could have caused this break? And what steps can I take to resolve it?

javascriptangularjsfilterangularjs-ng-repeatangularjs-ng-click

Answer №1

To simplify this process, you can make a few adjustments. I have created a modified version of your code sample on Plunker for you to test.

Update in DemoCtrl:

1. Define scope variables to store the selected objects.

$scope.selections = {
  parent: {},
  child: {}
};

2. Refine your "get" functions to assign values to these variables. Irrelevant code has been removed for clarity.

$scope.getParentDetails = function(parentObj) {
  if (!parentObj.jobs || parentObj.jobs.length === 0) {
    $scope.selections.parent = parentObj;
    $scope.selections.child = {};
  }
};

$scope.getChildDetails = function(childObj) {
  $scope.selections.parent = {};
  $scope.selections.child = childObj;
};

HTML Changes:

Update the markup to utilize the new object variables:

<tr ng-repeat-start="(pIndex, x) in pro | filter:{ f: '!B'} | filter:{ f: '!C'}" ng-class="{'selected': selections.parent == x}" ng-click="getParentDetails(x)">

<tr ng-repeat-end ng-repeat="job in x.jobs" ng-class="{'selected':selections.child == job}" ng-click="getChildDetails(job)">

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

The $state.go function is malfunctioning when called from a different controller

Below is the code snippet: $stateProvider .state('home', { url: "/home", templateUrl: "views/home.tpl.html", controller:"homeController" }) .state('test', { url: '/test', templateUrl: "views/test/dashboard.tpl.html", }); Th ...

angularjsangular-ui-router

Two separate entities link to a shared occurrence

Two namespaces are at play here: '/' and /notification If I trigger an event in the '/' namespace, how can I listen to the same event in the '/notification' namespace? It would be helpful if someone could provide an explanati ...

javascriptnode.jsexpresswebsocketsocket.io

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

javascriptjquerycss

Remain on the React page following an HTTP POST request to Flask

Is there a way to stay on the React frontend (localhost 3000) after completing a POST request to a Flask backend from a React form, without redirecting in the Flask backend? Relevant code: export const DateForm = () => { return ( <div&g ...

javascriptreactjs

The most effective method for transforming an array into an object in JavaScript using a prefixed value as the key

I am working with an array that contains prefix values ["options_a", "options_b", "options_c", "capable_d", "capable_e_c" ] I am looking for a way to transform this array into an object format with the pre ...

javascriptarraysecmascript-6

Exploring Angular: Utilizing URL Parameters for Multiple States

I am curious to know if it is achievable using angular 1.x. The requirement is to create a responsive application that works well on both mobile and desktop devices. Each page of the application should have a ui-view element that shows the regular content ...

angularjsurlstate

Unexpected behavior from Bootstrap within React

I recently started working on a React project that I initiated with the create-react-app command. To incorporate Bootstrap into my project, I added the necessary CDNs to the public/index.html file after generating the project. <link rel="stylesheet" hr ...

javascriptreactjsnpmtwitter-bootstrap-3create-react-app

I am experiencing issues with the functionality of front-page.php on my WordPress website

Seeking guidance in addressing a web development issue: I have encountered a problem with a website that I am currently working on locally using WordPress. I added the following code to the header.php file: <link rel="stylesheet" type="text/css" href= ...

javascriptphpjqueryhtmlwordpress

Is there a way to retrieve both the items within a specific category and its corresponding subcategories simultaneously?

Presently, I am managing two models for Category and subcategory. The category model provides an array of data as shown below: category = [ {_id: '1', name: 'Appliances', slug: 'appliances'}, {_id: '2', na ...

javascriptreactjsredux

Tips for altering the appearance of a button when moving to a related page

I have a master page with four buttons that have a mouse hover CSS property. Each button's corresponding response page is defined on the same master page. Now, I want to change the button style when the user is on the corresponding page. How can this ...

javascripthtmlcssasp.net

Retrieving HTML in Angular

As I delve into the world of Angular, my goal is to retrieve an HTML template from a file using JavaScript without relying on ng-include or any other directives. The challenge lies in not having HTML elements to work with, as all I have is a JavaScript fil ...

angularjs

Managing multiple properties linked to a main component array in VueJS

I am facing a challenge with a list of components that I would like to make editable and replicate the state to the parent component. The list component is defined as: Vue.component("shortcuts", { props: { shortcuts: Array }, template: '... ...

javascriptvue.js

File index with Node.js server for handling files

I currently have a code snippet for setting up a file server that serves files from a static folder named "public1". However, I am facing difficulties in making an HTML page display by default when a user navigates to the IP address in a browser. Although ...

javascripthtmlnode.jsexpress

The Vuex state keeps acting mysterious by claiming to be undefined

Here is my post.js located in src > store > post.js: import Vuex from 'vuex' import Vue from 'vue' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { testState: 'Hello&apo ...

javascriptvue.jsvuex

Storing and Manipulating a JavaScript Object with Vuex: A New Perspective

Consider a hypothetical JavaScript object class like this: class Car { var engineTurnedOn = false; ... public turnEngineOn() { engineTurnedOn = true } } If I want to turn the engine on, should I create an action called 'turnEngineOn&ap ...

javascriptvue.jsvuex

Unable to Submit Form in JSP Page

I have encountered an issue with a JSP page that contains a form which I am submitting using JavaScript. When the page has a smaller number of items, between 10-50, the submission works perfectly fine. However, when there are around 500 items or more on t ...

javascripthtmlformsjspjakarta-ee

An unexpected error has occurred within React Native, indicating that an object is

It's baffling why I keep receiving the error message: "undefined is not an object (evaluating '_this.props.navigation.navigate')" I am fairly new to react and have tried every possible solution but still cannot resolve this error. Belo ...

javascriptandroidreactjsreact-nativereact-router

Decrease the space between slide items by reducing margins or increasing their width

I'm having trouble achieving the desired spacing between items, I would like more space between each item but they are currently too close together. I am looking for a margin of 10px or a width of 32% for each item. I have already looked into some re ...

javascriptjqueryslick.js

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

I'm feeling a bit confused regarding reducers and dispatchers. While both receive actions as parameters, it doesn't necessarily mean that the actions I use in my dispatchers are the same as those used in my reducers, correct? For example, if I h ...

javascripttypescriptdesign-patternsredux

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

javascriptjqueryhtmlajaxforms