I am having trouble with AngularJS not enabling my checkbox when using a hyperlink with the ng-click event

Question

I am having trouble with AngularJS not enabling my checkbox when using a hyperlink with the ng-click event

I’m encountering an unusual situation where my checkbox isn’t getting ticked using Angular (1.5). Even after checking in chrome Batarang, everything seems fine but when I click on my link, the checkbox remains unchecked!?

Within an ng-repeat loop, I have an array being displayed. Inside this loop, there’s a checkbox and a hyperlink that should control the checkbox.

Is there anyone who can figure out why the hyperlink is failing to check the checkbox?

Thank you in advance,

Markup

<tr ng-repeat="o in vm.myArray track by o.Id"> 
  <td>

      <!-- This works (changes the checkbox to checked)-->
      <a href ng-click="o.Highlight=true">Just to test it (this works)</a> 

      <input type="checkbox" ng-model="o.Highlight" ng-click="vm.highlight(vm.myArray.Days, o.Name);" style="width: 15px" />

      <!-- This fails (I'm expecting it to check the checkbox) -->
      <a href ng-click="vm.highlight(vm.myArray.Days, o.Name)">
          {{o.Name}} 
      </a>
  </td>

</tr>

This function simply iterates through an array of objects that contain a "Highlight" property (boolean) which determines UI elements. The Highlight property should toggle the checkbox status.

Despite Chrome batarang showing the correct Highlight property setting, the checkbox doesn’t toggle as expected.

Highlight method in controller

(function() {
    "use strict";

    angular.module("bla").controller("homeCtrl", ["stuff", function (stuff) {
    var vm = this;
    vm.highlight = highlight;

    // Iterate through array items and toggle item highlighting if fieldToHighlight matches the item.Name.
    function highlight(collection, fieldToHighlight) {

        for (var i = 0; i < collection.length; i++) {
            var element = collection[i];

            if (element.Items != null) {
                for (var counter = 0; counter < element.Items.length; counter++) {
                    var item = element.Items[counter];

                    if (fieldToHighlight == item.Name) {
                        if (item.Highlight) {
                            item.Highlight = false;
                        }
                        else {
                            item.Highlight = true;
                        }
                    }
                }
            }
        }
    }

Update after comments

Angular plugin for Chrome

The Highlight property is initially set to false. When clicking the test hyperlink, the property correctly changes to true.

angular plugin for chrome showing property correct data type

Update 2 - shows chrome debugging is setting the value correctly

During debugging, the Highlight property behaves correctly, even though the UI is not updating.

code being debugged showing the highlight is working even though the ui is not updating

Update after comments (13th december 2016)

Comments within the code:

<tr ng-repeat="o in vm.myArray track by o.Id">
    <td>
      <!-- checkbox -->
      {{o.Highlight}}
      <!-- clicking this changes the echoed variable above immediately but doesn't affect the checkbox based on o.Highlight -->
      <input type="checkbox" ng-click="vm.highlight(o);" ng-model="o.Highlight" />

      <!-- name -->
      <!-- clicking this toggles the correct behavior in the UI dependent on the o.Highlight property but doesn't change the checkbox state -->
      <a href ng-click="vm.highlight(o)">{{o.Name}}</a>
    </td>
</tr>

javascript angularjs

Answer 1

Answer №1

Here are a few queries and solutions for you :-)

Why is the array vm.myArray used in the ng-repeat, but in the vm.highlight() method, vm.myArray.Days is treated as an object? It raises a question about the inconsistency in treating myArray as both an array and an object.
Furthermore, within this method, the comparison of o.Name with the deep level property like vm.myArray.Days[0].Items[0].Name shows two different formats. What is the reason behind this difference in format?

To address these questions effectively, it would be helpful to have access to the actual myArray data collection.

Even without that information, assuming myArray is being considered as an array rather than an object, I can propose the following alternative answers:

Response 1:

If you aim to toggle the highlight state, try using o.Highlight=!o.Highlight instead of o.Highlight=true as shown below:

<a href ng-click="o.Highlight=!o.Highlight">Just to test it (this approach should work)</a>

Response 2:

If you prefer having the same toggle effect while incorporating other controller functions, you can encapsulate the logic as follows:

<a href ng-click="vm.highlight(o)">{{o.Name}}</a>

function highlight(obj) {
   obj.Highlight = !obj.Highlight;
}

Response 3:

In case you want to compare the Name property against an array, consider the following implementation:

<a href ng-click="vm.highlight2(vm.myArray, o)">{{o.Name}}</a>

function highlight2(collection, obj) {
  for (var i = 0; i < collection.length; i++) {
    var item = collection[i];
    if (obj.Name == item.Name) {
       obj.Highlight = !obj.Highlight;
    }
  }
}

Note: If your array structure differs or if there are inconsistencies, the provided responses might not yield the intended results. In such cases, sharing the sample data from vm.myArray is crucial.

Sample code snippet:

(function() {
    "use strict";
    angular.module("bla", []);
    angular.module("bla").controller("homeCtrl", [ function () {
    var vm = this;
    vm.highlight = highlight;
    vm.highlight2 = highlight2;
      
    vm.myArray = [{Id: 1, Name: 'Item 1'}, {Id: 2, Name: 'Item 2'}, {Id: 3, Name: 'Item 3'}];

    // Iterate through array and toggle the Highlight field when matching the item.Name.
    function highlight(obj) {
       obj.Highlight = !obj.Highlight;
    }
      
    function highlight2(collection, obj) {
      for (var i = 0; i < collection.length; i++) {
        var item = collection[i];
        if (obj.Name == item.Name) {
           obj.Highlight = !obj.Highlight;
        }
      }
    }

}]);
  
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bla">
<table ng-controller="homeCtrl as vm">
  <tr ng-repeat="o in vm.myArray track by o.Id"> 
   <td>

      <a href ng-click="o.Highlight=!o.Highlight">Just to test it (toggle feature)</a> 

      <input type="checkbox" ng-model="o.Highlight" ng-click="vm.highlight(o);" style="width: 15px" />
      Link 1: 
      <a href ng-click="vm.highlight(o)">
          {{o.Name}} 
      </a>&nbsp;
      Link 2: 
      <a href ng-click="vm.highlight2(vm.myArray, o)">
          {{o.Name}} 
      </a>
   </td>

  </tr>
</table>
</div>

Answer 2

Here are a few queries and solutions for you :-)

Why is the array vm.myArray used in the ng-repeat, but in the vm.highlight() method, vm.myArray.Days is treated as an object? It raises a question about the inconsistency in treating myArray as both an array and an object.
Furthermore, within this method, the comparison of o.Name with the deep level property like vm.myArray.Days[0].Items[0].Name shows two different formats. What is the reason behind this difference in format?

To address these questions effectively, it would be helpful to have access to the actual myArray data collection.

Even without that information, assuming myArray is being considered as an array rather than an object, I can propose the following alternative answers:

Response 1:

If you aim to toggle the highlight state, try using o.Highlight=!o.Highlight instead of o.Highlight=true as shown below:

<a href ng-click="o.Highlight=!o.Highlight">Just to test it (this approach should work)</a>

Response 2:

If you prefer having the same toggle effect while incorporating other controller functions, you can encapsulate the logic as follows:

<a href ng-click="vm.highlight(o)">{{o.Name}}</a>

function highlight(obj) {
   obj.Highlight = !obj.Highlight;
}

Response 3:

In case you want to compare the Name property against an array, consider the following implementation:

<a href ng-click="vm.highlight2(vm.myArray, o)">{{o.Name}}</a>

function highlight2(collection, obj) {
  for (var i = 0; i < collection.length; i++) {
    var item = collection[i];
    if (obj.Name == item.Name) {
       obj.Highlight = !obj.Highlight;
    }
  }
}

Note: If your array structure differs or if there are inconsistencies, the provided responses might not yield the intended results. In such cases, sharing the sample data from vm.myArray is crucial.

Sample code snippet:

(function() {
    "use strict";
    angular.module("bla", []);
    angular.module("bla").controller("homeCtrl", [ function () {
    var vm = this;
    vm.highlight = highlight;
    vm.highlight2 = highlight2;
      
    vm.myArray = [{Id: 1, Name: 'Item 1'}, {Id: 2, Name: 'Item 2'}, {Id: 3, Name: 'Item 3'}];

    // Iterate through array and toggle the Highlight field when matching the item.Name.
    function highlight(obj) {
       obj.Highlight = !obj.Highlight;
    }
      
    function highlight2(collection, obj) {
      for (var i = 0; i < collection.length; i++) {
        var item = collection[i];
        if (obj.Name == item.Name) {
           obj.Highlight = !obj.Highlight;
        }
      }
    }

}]);
  
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bla">
<table ng-controller="homeCtrl as vm">
  <tr ng-repeat="o in vm.myArray track by o.Id"> 
   <td>

      <a href ng-click="o.Highlight=!o.Highlight">Just to test it (toggle feature)</a> 

      <input type="checkbox" ng-model="o.Highlight" ng-click="vm.highlight(o);" style="width: 15px" />
      Link 1: 
      <a href ng-click="vm.highlight(o)">
          {{o.Name}} 
      </a>&nbsp;
      Link 2: 
      <a href ng-click="vm.highlight2(vm.myArray, o)">
          {{o.Name}} 
      </a>
   </td>

  </tr>
</table>
</div>

I am having trouble with AngularJS not enabling my checkbox when using a hyperlink with the ng-click event

Answer №1

Similar questions

Is there a way to ensure my Vue variable is declared once the page has fully loaded?

Is there a way to disable the default UI views for login and registration in IdentityServer3?

Creating a function that assigns an anonymous function which in turn returns another anonymous function

Effective methods for eliminating Stripe's iframes

What is the proper way to utilize the uppercase method while ensuring that Turkish characters are not permitted?

Having trouble grasping the inner workings of code while iterating through a JSON array in ReactJS

Adding a Javascript file to the requirejs-config.js file in Magento 2

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Incorporating Bootstrap JS into Next.js

Jsonip.com is providing both internal and external IP addresses

Ways to determine if a web browser is executing javascript code (without altering the javascript on the webpage)

Customize the href option with Fancybox plugin in real-time

The mystery of a JQuery response that remains elusive

Resolving the Table Issue with 'onclick' in Javascript

What steps should I take to resolve the issue with this error message: Error: listen EADDRINUSE

The "smiley" character added to the information during an Ajax call

Guide to sending a variable's value through AJAX in a PHP function

Guide to finding your way to a specific section in React

The functionality to redirect in Wordpress Contact Form 7 based on the value of a radio button selection does

Data will not bind with Laravel and Vue