What I am aiming for is to display a complete list of cities as soon as the page is loaded.
Once a user clicks on a checkbox next to a city, my goal is to utilize ng-show/ng-hide in order to display the results specific to that city while hiding those of the non-selected cities.
I prefer not to use filter because it directly impacts the DOM and triggers re-rendering.
If anyone has suggestions or recommendations on how to achieve this effectively, please share your insights.
Here's a quick exercise for you to try:
<label ng-init="city = {}"><input type="checkbox" ng-change="selected = true" ng-model="city['Paris']">Paris</label>
<label><input type="checkbox" ng-change="selected = true" ng-model="city['Tokyo']">Tokyo</label>
<div ng-controller="MyCtrl">
<ul class="employees">
<li ng-repeat="employee in employees" ng-show="!selected || city[employee.city]">
{{employee.name}}
</li>
</ul>
</div>
For instance, if you have a list of cities stored in $scope.cities and you want to display them with checkboxes on the landing page, you can achieve this using ng-repeat directive for cities.
<input type="checkbox" ng-model="$scope.cities[$index]['select']" ng-true-value="'YES'" ng-false-value="NO" ng-click="showCitiesData(city)">
Next, in your controller:
.controller{
$scope.showcitydata=false;
$scope.showCities=function(city){
if(city.select=='YES'){
$scope.showcitydata=true;
}
}
}
It seems like you are utilizing ng-repeat to display all the cities. If so, you can try the following approach:
<ul class="cities">
<li ng-repeat="city in cities" ng-show="!selectedCity">{{city}}</li>
<li ng-show="selectedCity">{{selectedCity}}</li>
</ul>
Once a user chooses a city, the variable selectedCity will be populated and it will hide the list, displaying only the selected city.
Remember to update the selectedCity variable in your controller when the user clicks the checkbox.
Since there is no code provided, it's hard to determine how you are currently implementing the city display. Hopefully, this example clarifies the process for you.
Check out this JSFiddle example to see if it aligns with what you are trying to achieve.
Place the filter within the ng-repeat directive using an object expression
ng-repeat="city in cities | filter:{selected:true}"
Could someone assist me with this issue? I am trying to implement ajax and sweetalert.js using the following repository: So far, everything is working well when I use onclick = "" to call my function. However, I need guidance on how to properly utilize th ...
I am working with HTML code that looks like this: <div dir-paginate="x in comments | itemsPerPage: commentsPerPage"> HERE IS DIRECTIVE FROM BLEOW </div> My goal is to update the commentsPerPage scope within the directive... Below is a direct ...
I've been attempting to adjust the color of checkboxes and radio buttons. After conducting some research, I stumbled upon this helpful link: Material UI change Input's active color Unfortunately, I keep encountering the following error: (0 , _ ...
There are 4 arrays filled with dynamic data that I want to display in a vertical table. Currently, my code looks like this: This is the snippet of my code: <table class="table table-striped"> <tbody> <tr > <td n ...
My current code includes JSON data that I need to display in table rows, but I'm struggling to understand how to do so effectively. The output I am currently seeing is all the rows from the array stacked in one row instead of five separate rows as in ...
I'm looking to execute a function when a specific type of button is clicked on my HTML page. I have approximately 10 buttons on the page and I've written the following code to call a function when a button is clicked: $('.divname').ea ...
Is it possible to trigger a function in a Stencil component from the parent Vue instance? For example, I would like to call the callChild() method in the Vue instance, which will then trigger the doSomething() function in the Stencil component. The main ...
After React was updated to version 0.15 to address the issue of excessive generation of tags, I made the decision to update my project.</p> <p>However, when I ran the command <code>npm update, it only updated to version 0.14.8. Running ...
Currently, I am working on developing a component that receives an object specifying which directive it should render. This is the Angular component componentRenderer.js angular .module('app.core') .component('componentRenderer&apo ...
this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...
Update: just to clarify, I'm working on activating the navbar button based on the current page. I have a navigation bar set up and I am trying to dynamically add an "active" class to the li element when you are on that specific page. However, for som ...
Within one of my Vue components, the code structure is as follows: <li class="comment" v-for="comment in comments"> ... </li> Accompanied by a computed method: computed: { comments() { // Here lies the logic for filtering comment ...
Seeking assistance with incorporating annotations into my website using annotator.js. I have been encountering difficulties getting it up and running successfully. My goal is to display highlighted annotations upon page load, but I keep receiving a JavaSc ...
My NodeJS app on Azure was initially written in Javascript with the app.js file located in the root directory. This file was automatically detected during deployment via Git. Recently, I converted the app to Typescript and now have a build directory, with ...
Seeking assistance with filtering JSON data based on the code/desc in the state property. Here is an example of my JSON data: $scope.agent = { "0d297c1711de": [{ "applicationName": "rewards-accounts", "agentId": "0d297c1711de", "st ...
Ext.define('iTell.view.MarketView', { extend: 'Ext.Container', xtype: 'marketview', config: { scrollable: false, layout: 'fit', items: [ { xtype: &apos ...
Within my project, I have connected the react-static repository with the react repository using yarn link. "react": "^16.13.1" "react-static": "^6.0.18" I am importing various components from the react-static reposi ...
Currently, I am developing a movie application using NextJS to enhance my skills. The homepage features each movie's title and a brief description. When a user clicks on a movie, they are taken to a dedicated page that showcases more details about the ...
I rely on a dependency that is transpiled to ES6. My goal is to leverage ES2019 features in my own code. Ultimately, I aim to output ES6. This is how I set up my tsconfig { "compilerOptions": { "module": "CommonJS" ...
Looking to test pages with numerous setTimeout functions, I'm searching for a way to expedite the code execution upon page load rather than waiting for it to run on its own. One idea is to inject custom JavaScript like this into the page before evalu ...