The Angular checkbox is not checking in the view despite having a true value in the scope

After clicking "Cancel" in the modal window, the checkbox is unchecked even though it should remain checked (the scope.enabledLogin value is true after pressing the "Cancel" button and dismissing the modal window). Why is this happening?

Jade:

.checkbox(ng-show="showEnabledLogin", ng-class="{'disabled': (!email.length || userForm.email.$error.email)}")
      label(for="enabledLogin")
        input(ng-show="showEnabledLogin", type="checkbox", id="enabledLogin", name="enabledLogin", ng-model="enabledLogin", ng-disabled="(!email.length || userForm.email.$error.email)", ng-change="showEnabledLoginModal()")
        span Player login enabled

JS:

scope.isEnabledLoginManuallyUnchecked = false;
function checkIfEnabledLoginManuallyUnchecked() {
        if(scope.isEnabledLoginManuallyUnchecked) {
          scope.showEnabledLogin = false;
          scope.showInviteLogin = true;
          scope.enabledLogin = false;
        } else {
          scope.showEnabledLogin = true;
          scope.showInviteLogin = false;
          scope.enabledLogin = true;
        }
      }
var enabledLoginModal,
                modalScope;

      var isOpened = false;

      scope.showEnabledLoginModal = function () {
        if (isOpened) return;
        if ((scope.email.length || scope.userForm.email.$error.email)) {
          if (scope.enabledLogin) {
              debugger;
            var child = scope.$new();
            var extension = {
              cancel: function (e) {
                scope.isEnabledLoginManuallyUnchecked = false;
                checkIfEnabledLoginManuallyUnchecked();
                enabledLoginModal.dismiss(e);
                isOpened = false;
              },
              modal: {
                title: 'Please confirm'
              }
            };
            modalScope = angular.extend(child, extension);
            var modalOptions = {backdrop: 'static', templateUrl: 'app/player/edit/show-enabled-login-modal.html'};
            enabledLoginModal = Modal.custom(modalOptions, modalScope, 'modal-danger');
            isOpened = true;
            enabledLoginModal.result.then(function (result) {
            });
          }
        }
      }

Answer №1

Make sure to locate this section in your provided code snippet:

 cancel: function (e) {
                scope.isEnabledLoginManuallyUnchecked = false;
                checkIfEnabledLoginManuallyUnchecked();
                enabledLoginModal.dismiss(e);
                isOpened = false;
              },

This block of code will be triggered when the user clicks on the cancel button within the modal, and then it will update:

scope.isEnabledLoginManuallyUnchecked = false;

This action is responsible for unchecking a certain feature due to the following lines being executed as well:

enabledLoginModal.dismiss(e); isOpened = false;

These specific commands are what lead to the closure of the modal window upon clicking cancel. If you require further clarification, feel free to create a fiddle for additional investigation.

khajaamin

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

Utilizing several carets in a single or multiple text areas and input boxes

Just a quick question... Can a textbox have two carets simultaneously, or can we have two separate textboxes both focused at the same time? I am aware of simulating this using keydown listeners but I'm specifically looking for visible carets in both ...

Tips for safely executing an SQL query with electron.js

I have a new project where I need to interact with an SQL database on the local network, but it's not located on the same system I'm working on (not SQLExpress). So far, I've figured out how to collect user input on a webpage and send that ...

What is the process for utilizing "yarn create <pkg-name>" command?

While browsing the Yarn blog, I came across a feature that caught my attention - yarn create. This function is similar to create-react-app. https://yarnpkg.com/blog/2017/05/12/introducing-yarn/ I decided to give it a try on my local machine by creating a ...

Transferring information between two Vue components using a variable declared in the main JavaScript file

In my project, I am working with two separate Vue files - let's say 1.vue and 2.vue - along with a main JS file. Within my main.js file, there is a variable xyz under the window.App data method. I am looking to utilize this variable as a shared data ...

Exploring the possibility of utilizing the talks.js library to develop a chat feature within a React application

I'm currently working on integrating the talks.js library to set up a chat feature in my React project. I've followed all the instructions provided at , but unfortunately, it's not functioning as expected. I'm not quite sure what I migh ...

Generate an array containing the IDs of the chosen objects

Suppose I have an array like this: var aaa = [ {"id": 1, "text": "Ann"}, {"id": 2, "text": "Bob"}, {"id": 3, "text": "Carol"}, {"id": 4, "text& ...

Using Jquery to insert content into HTML using the .html() method is not possible

I am inserting Dynamic Code into a Div via Ajax and I also need to include some Javascript, but it's not displaying in the code. Below is the code snippet: $.ajax({ url: "ajax_add_logo_parts.php", data: 'act=getPartIm ...

Listening for Events from Child Components in Vue.js

I am struggling to figure out how to send an event from a child component to its parent in order to change the view. Although I have been able to create and emit the event, my template does not seem to be properly registering it. I am working with Single ...

Can you guide me on how to establish a cookie within a selenium webdriver javascript script?

I am trying to figure out how to set a cookie using a basic webdriver script: WDS.sampleResult.sampleStart(); //WDS.driver.manage().addCookie(new Cookie("connect.sid", "s%3AeexeZcd_-S23Uh30e3Dmd4X9PskWF08s6m5hDurDa5Jj66SupmmiqvKEjAg6HGigl0o0V%2B9R7m4", ...

Make sure to finish processing the HTTP GET request before triggering the click event

Here is some of my javascript code and a question that I have: $scope.fav_bill_details=function (id1,id2,bill_id) { document.getElementById(id2).style.display="none"; $scope.getActiveBill(); document.getElementById(id1).style.display="block"; ...

Tips for implementing sorting and filtering with Ajax and Json in PHP and MySQL applications

Greetings! I'm a newcomer in the world of software development, currently working on a software site. I've successfully built the pages and layout using HTML, CSS, and JavaScript, which was the easy part. Now, my challenge lies in creating main c ...

Save the JSON response from JavaScript to a different file extension in a visually appealing layout

I've created a script to generate both the CSR and private key. The response displayed in the <textarea> is well-formatted with newline characters (assuming familiarity with the correct CSR/Private key format). However, I'm encountering a ...

Leveraging AJAX, PHP, and MySQL for showcasing tabular information

My goal is to dynamically display a column of data labeled as [pin], depending on the values of [plan] and [order_id]. Specifically, when plan=9 and order_id=0. I am looking to achieve this without having to reload the entire page by utilizing Ajax. Below ...

Bring in a sole getServerSideProps function to various pages in Nextjs

Is there a way to import the getServerSideProps method from this page to another and apply it across multiple pages? Here is the code snippet I am referring to: import DashboardLayout from "@app/layout/DashboardLayout"; import Overview from &quo ...

When making an Ajax request, the response is received successfully, however, the success, complete, and error

I am attempting to retrieve SQL results from a database using an AJAX call and display them on another PHP page. Here is my AJAX call code: function newfunc(){ start += 10; var params = parseURLParams(document.URL); var datastring = "nextStart="+start+"&a ...

Unable to execute node in vscode terminal

Can anyone help me figure out why I'm unable to run Node in my vscode terminal? I'm a newbie and currently using POP OS 22.04. https://i.stack.imgur.com/WqHWM.pnghttps://i.stack.imgur.com/GEHeA.png Your assistance would be greatly appreciated. ...

Creating a dynamic anchor scrolling effect within a dropdown select menu

Having trouble achieving smooth scrolling with a select option element, only works with a link. Any suggestions? Check out the jsfiddle demo to see what I mean! $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location. ...

Switching Angular Buttons

I am developing an Angular application with a Bootstrap theme that includes 2 radio buttons, each triggering a separate page. It is important that only one radio button can be selected at a time. I want the class values to be btn btn-primary active for the ...

The button must stay deactivated even if the page is refreshed

When I click on the submit button, it disables for 15 seconds before getting enabled again. However, if I refresh the page, the button becomes immediately enabled without waiting the disable time. Can someone please assist me with this issue? $(window). ...

The absence of the object's shadow is conspicuously noticeable - three.js

View Screenshot Hey there! I recently exported a 3D model tree from Blender and everything seemed to have gone smoothly, but I encountered an issue. The shadow appears on the trunk and branches, however, it is not reflecting properly. Could this be due to ...