As soon as I closed the modal, I noticed that the checked inputs reverted back to

I am using checkboxes within a modal to narrow down my search results. However, I have encountered an issue where when I check multiple checkboxes and then close the modal, the checked inputs become unchecked.

Every time I open the modal, I want the checked inputs to remain checked.


var filterTemps = [
    "partial/uicomponent/mdlFilters/mdl.estateType.filter.html",
];

$scope.showReleventMdl = function(num){

    var filtersModal = $modal({
        backdrop:true,
        placement:'top',
        templateUrl :  filterTemps[num],
        controller : 'filterCtrl',
        show: false
    });

    filtersModal.$promise.then(filtersModal.show);
};
<!-- Trigger the function to call the modal -->
 <ul class="nav navbar-nav">
   <li>
     <a href="" ng-click="showReleventMdl(0)" ng-bind="string.pages.form.estateType"></a>
     </li>
   ...
</ul>

--------------------------------------------------

<!-- My Modal Template -->
<div class="modal-body">

    <ul class="filterList">
        <li class="filterListItem half" ng-repeat="item in string.pages.mainPage.estateTypes">
            <input id="estateType{{$index}}" ng-click="checked(item)" type="checkbox" class="filterCheck">
            <label for="estateType{{$index}}" ng-bind="item"></label>
        </li>
    </ul>;

</div>;

Is there a way to store the checked inputs and bring them back in a checked state when re-opening the modal? Thank you!

Answer №1

No values are currently assigned to your $scope object. Here's a suggestion...

<div class="modal-body">    
  <ul class="filterList">
    <li class="filterListItem half" ng-repeat="item in string.pages.mainPage.estateTypes">
      <input id="estateType{{$index}}" type="checkbox" ng-model="checkbox[$index].checked" class="filterCheck">
      <label for="estateType{{$index}}" ng-bind="item"></label>
    </li>
  </ul>

</div>

Next, set up the $scope object in your controller to hold checkbox values.

$scope.checkbox = {};

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

Vue Router configuration functions properly when accessed through URL directly

I need guidance on how to handle the routing setup in this specific scenario: Below is the HTML structure that iterates through categories and items within those categories. The <router-view> is nested inside each category element, so when an item i ...

Methods for removing and iterating through images?

I successfully programmed the image to move from right to left, but now I want to add a function where the image is deleted once it reaches x: 50 and redrawn on the left. I attempted to use control statements like "if," but unfortunately it did not work a ...

A Step-by-Step Guide on Sending Response to ajaxError Callback in Perl

When working with JavaScript, I have a method of capturing errors that looks like this: $(document).ajaxError(function(event, jqxhr, settings, thrownError) { handleError(MSG_SAVE_ERROR); }); Now, my question is how can I retrieve an error message fro ...

What is preventing the visibility of my invoice items when I try to make edits to my invoice?

Currently, I am utilizing Laravel 5.7 and VueJs 2.5.* in my project. The issue I am facing is related to a Bootstrap Model that I use for creating and editing TicketInvoice and its associated TicketInvocieItems. When I try to edit, the Bootstrap Model open ...

Lag in responsiveness of iOS devices when using html5 applications

My HTML5 video app includes a combination of video, a JavaScript swipable playlist, and other animated overlays. When using the app on iOS, the performance of playlist swiping and overlay animations is great upon initial load. However, after playing a vid ...

Combining the elements within an array of integers

Can anyone provide insight on how to sum the contents of an integer array using a for loop? I seem to be stuck with my current logic. Below is the code I've been working on: <p id='para'></p> var someArray = [1,2,3,4,5]; funct ...

What is the best way to export two functions from a server-side module in JavaScript?

Working with Node/Express. In my project, I have an index.js server file and a separate js module called validmoves.js. Usually, to export a single function from a module, I can simply use the following syntax: module.exports = shuffleFunction; Then, i ...

Encountering a problem with the Batarang tool while constructing a MEANJS demo (Uncaught TypeError: Unable to access property 'getToggleElement' of null)

Trying to utilize the AngularJS Batarang while learning to create a MEANJS App. You can find the tutorial here: Noticing that my "Scopes" tab appears differently compared to the tutorial video and an error is displayed. Here is what I see in my Batarang ...

Concealing the primary div within a Vue child component

Is there a way to conceal the primary div within a Vue application created using Vue-CLI? I attempted adding the display property, but it did not solve the problem. I am attempting to hide it within my Channels component. Here is how my main component lo ...

Identifying the user's location within the application and dynamically loading various Angular scripts

Currently, I am working on a large-scale web application using Laravel and Angular. In this project, I have integrated various angular modules that come with their own controllers, directives, and views. One challenge I am facing is the need to load diffe ...

Node.js Middleware Design Pattern: Connectivity Approach

I am embarking on a journey to learn Javascript, Node.js, Connect, and Express as part of my exploration into modern web development stacks. With a background in low-level networking, diving into Node.js' net and http modules was a smooth process for ...

How can the Singleton pattern be properly implemented in Typescript/ES6?

class Foo{ } var instance: Foo; export function getFooInstance(){ /* logic */ } or export class Foo{ private static _instance; private constructor(){}; public getInstance(){/* logic */} } // Use it like this Foo.getInstance() I would ...

What is the reason behind the functionality difference between $scope.$watch and $scope.$watchCollection in AngularJS?

While attempting to monitor changes in an array for filtering purposes, I encountered an issue with the $scope.$watchCollection() method. Even when users toggled boolean values on objects within the array using checkboxes and a button, the $watch did not ...

Button's focus event doesn't trigger on iPad

I am facing an issue with adding a bootstrap popover to my website. The popover should appear when the user clicks a button using the focus event. This functionality works fine on desktop browsers, but on the iPad, it seems like Safari on iOS does not trig ...

Attempting to serialize a form using Ajax and jQuery

I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...

Listener for resizing events in jQuery implemented in a separate script file

One issue I am facing is separating my jQuery code from my HTML page, especially when it comes to the resize event. I have an index.html file and a main.js file where I prefer to keep all of my jQuery code. The problem arises when the resize event does no ...

Automatically change a text based on its location

Currently leveraging the amazing flexible-nav to showcase the current subtopic within my post. I am also considering the possibility of extracting this current-string and showcasing it at the top of the page in my main navigation bar. This way, the text w ...

Transmitting the Flag between PHP and JavaScript

I need help with setting a flag in PHP and accessing it in JavaScript. Currently, I have the following code: PHP if ($totalResults > MAX_RESULT_ALL_PAGES) { $queryUrl = AMAZON_SEARCH_URL . $searchMonthUrlParam . ...

Oops! The react-social-media-embed encountered a TypeError because it tried to extend a value that is either undefined, not a

I recently attempted to incorporate the "react-social-media-embed" package into my Next.js project using TypeScript. Here's what I did: npm i react-social-media-embed Here is a snippet from my page.tsx: import { InstagramEmbed } from 'react-soc ...

Showing a div element with the power of JavaScript

I want to enhance the accessibility of my website for users who do not have JavaScript enabled. Content that will be visible if the user has JavaScript enabled. Content visible when JavaScript is disabled. By default, DisableJS is set to Display:none; ...