What is the best way to automatically select a checkbox when using ng-repeat on page

Question

What is the best way to automatically select a checkbox when using ng-repeat on page

I'm looking to automatically check an input checkbox when the page loads, and if it's checked, subtract its value from the total. How can I tackle this issue?

Here's the HTML snippet:

<p>{{vm.TOTAL VALUE}}</p>
<tr ng-repeat="item in items track by $index">
    <td><input type="checkbox" ng-model="item.selected" ng-change="vm.checkItems(item)" ng-checked="vm.itemArray.indexOf(item.id) > -1"/></td>
    <td>{{ item.SOMEVALUE}}</td>
</tr>

And here's the controller code:

vm.itemArray = [4,9,45]
vm.TOTALVALUE = "345"

javascript angularjs

Answer 1

Answer №1

Unfortunately, I currently lack the necessary points to leave a comment. However, let me try to clarify your query. Are you looking to have a specific id's box automatically checked when the page loads?

ng-checked="vm.itemArray.indexOf(item.id) > -1

If you simply want all boxes to be checked automatically upon page load, you can use

ng-checked="true"

I hope I correctly grasped your question.

Best of luck!

Answer 2

Unfortunately, I currently lack the necessary points to leave a comment. However, let me try to clarify your query. Are you looking to have a specific id's box automatically checked when the page loads?

ng-checked="vm.itemArray.indexOf(item.id) > -1

If you simply want all boxes to be checked automatically upon page load, you can use

ng-checked="true"

I hope I correctly grasped your question.

Best of luck!

Answer 3

Answer №2

Try streamlining your controller by implementing the following steps to see if you can achieve functionality.

Insert the code below into your controller:

$scope.items = [1, 2, 3, 4, 5, 6, 45];
$scope.itemArray = [4, 9, 45];

Include the following in your template:

<table>
        <tr ng-repeat="item in items track by $index">
            <td><input type="checkbox" ng-model="selectedItem" ng-checked="itemArray.indexOf(item) >-1" /></td>
            <td>{{ item}}</td>
        </tr>
    </table>

I have a similar setup without the ng-change directive on my checkbox element. If this solution works for you, reach out and I can assist in troubleshooting any issues that may arise. Let me know! 👍

View the results of this code with a screenshot https://i.sstatic.net/yftqi.png

Answer 4

Try streamlining your controller by implementing the following steps to see if you can achieve functionality.

Insert the code below into your controller:

$scope.items = [1, 2, 3, 4, 5, 6, 45];
$scope.itemArray = [4, 9, 45];

Include the following in your template:

<table>
        <tr ng-repeat="item in items track by $index">
            <td><input type="checkbox" ng-model="selectedItem" ng-checked="itemArray.indexOf(item) >-1" /></td>
            <td>{{ item}}</td>
        </tr>
    </table>

I have a similar setup without the ng-change directive on my checkbox element. If this solution works for you, reach out and I can assist in troubleshooting any issues that may arise. Let me know! 👍

View the results of this code with a screenshot https://i.sstatic.net/yftqi.png

What is the best way to automatically select a checkbox when using ng-repeat on page

Answer №1

Answer №2

Similar questions

Unsure how to proceed with resolving lint errors that are causing changes in the code

Capture the height values from various divs and store them in an array, then utilize these values to adjust the size of other

Using Partial function input in TypeScript

express routes are failing to execute the function

Encountering an issue with WebRTC where the 'addIceCandidate' function on RTCPeerConnection is failing, resulting in an error displayed on the console. However, despite this error

Is there a lack of a feature for automatically shifting to the next input element in dynamically-created HTML?

Does the functionality of JSON.parse include recursion?

This phrase cannot be invoked

Picking and modifying a newly added HTML input element using Jquery

Transferring a CSV file to the server from a React application using multi-part form

Issues have arisen with the @keydown.ctrl and @keyup.ctrl event modifiers in Vue.js, as they are not properly responding

Obtain the HTML of a Vue component and transmit it using an ajax POST request

Angular throws an error when trying to parse undefined data outside of an async function

Error: Phonegap displaying incomplete or corrupted image

What is the best way to connect a nested Vuex object to a Vue.js property within the Tiptap text editor?

An issue arises in vue.js where the v class binding takes precedence over other bindings and fails to properly remove

Refresh the dataTable once all external data has been successfully fetched

React error: Unexpected token < in JSON when fetching local file

The hover state of a div will not be lost if its parent element is not being hovered over

Click on the link to open it in a SharePoint modal and populate it with the value from the