Top method for connecting a group of objects to checkbox inputs using ng-model in Angular 1.6

As I consider this table row, my goal is to dynamically control the activation of checkboxes:

function manageRoles(data){
  var allRoles = [
    {role1: true, name: "Role One",   active: true},
    {role2: false, name: "Role Two",   active: false},
    {role3: true, name: "Role Three", active: true},
    {role4: false, name: "Role Four",  active: false},
    {role5: true, name: "Role Five",   active: true},
    {role6: false, name: "Role Six",   active: false},
    {role7: true, name: "Role Seven", active: true},
    {role8: false, name: "Role Eight",  active: false},
    {role9: true, name: "Role Nine", active: true},
    {role10: false, name: "Role Ten",  active: false}
  ];

}
<tr>
<td>
  <input type="checkbox" name="role1" ng-model="ctrl.data.roles.role1" />&nbsp;Role One
</td>
<td>
  <input type="checkbox" name="role2" ng-model="ctrl.data.roles.role2" />&nbsp;Role Two
</td>
<td>
  <input type="checkbox" name="role3" ng-model="ctrl.data.roles.role3" />&nbsp;Role Three
</td>
<td>
  <input type="checkbox" name="role4" ng-model="ctrl.data.roles.role4" />&nbsp;Role Four<
</td>
</tr>

<tr>
  <td>
  <input type="checkbox" name="role5" ng-model="ctrl.data.roles.role5" />&nbsp;Role Five
</td>
<td>Role Six</td>
<td>Role Seven</td>
<td>Role Eight</td>
</tr>

I have successfully processed the data from an Angular service and created a new array called allRoles.

Next, I aim to connect the allRoles array with the checkbox inputs within my view to enable or disable as needed.

In essence, if the checkbox for "Role One" should be enabled, then ng-model=ctrl.data.roles.role1 should reflect the active property from the allRoles array.

Maybe looping through ng-model?

Any insights are welcome. Meanwhile, I will continue to investigate ...

javascriptangularjsangular1.6

Answer №1

Try implementing the ng-repeat directive in your code, like this:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      $scope.myRoles = [
        {role1: true, name: "Role One",   enabled: true},
        {role2: false, name: "Role Two",   enabled: false},
        {role3: true, name: "Role Three", enabled: true},
        {role4: false, name: "Role Four",  enabled: false}
      ];
    });
    </script>
  </head>
  <body ng-controller="appController">
    <table>
      <tr>
        <td ng-repeat="role in myRoles">
          <input type="checkbox" name="role1" ng-model="role.enabled" />&nbsp;{{role.name}}
        </td>
      </tr>
    </table>
  </body>
</html>

UPDATE Responding to queries:

Are you looking for this layout?

1  2  3  4
5  6  7  8
9  10

Or do you prefer this layout instead:

1  4  7  10
2  5  8
3  6  9

If you want the first layout, try this code:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Example</title>
    <style>
    .role {
      display: inline-block;
      width: 25%;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      window.x = $scope.myRoles = [
        {role1: true, name: "Role One",   enabled: true},
        {role2: false, name: "Role Two",   enabled: false},
        {role3: true, name: "Role Three", enabled: true},
        {role4: false, name: "Role Four",  enabled: false},
        {role1: true, name: "Role Five",   enabled: false},
        {role2: false, name: "Role Six",   enabled: true},
        {role3: true, name: "Role Seven", enabled: true},
        {role4: false, name: "Role Eight",  enabled: false},
        {role1: true, name: "Role Nine",   enabled: false},
        {role2: false, name: "Role Ten",   enabled: false}
      ];
    });
    </script>
  </head>
  <body ng-controller="appController">
    <span class="role" ng-repeat="role in myRoles">
      <input type="checkbox" name="role1" ng-model="role.enabled" />&nbsp;{{role.name}}
    </span>
  </body>
</html>

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

Error in JSON.parse function: unexpected input parameter issue

When using JSON.parse, it is expected to have text as the first parameter. More information about this can be found on this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse. JSON.parse(['["asd&quo ...

javascriptarraysjsonparsingecmascript-6

What is the best way to configure nodejs and expressjs for rendering multiple html files with angularjs integration?

I am currently utilizing the following code snippet: app.use(express.static(__dirname + '/public')); to designate the static folder for a MEAN application. I require multiple html files that incorporate angularjs (not angular2). However, the is ...

angularjsnode.jsexpressmean-stack

When altering a single scope variable in AngularJS, the effect cascades to impact other scope variables as well

After uploading my code on fiddle, I noticed that changes made to the myAppObjects variable also affect another variable. Here is the link to the code: https://jsfiddle.net/owze1rcj/ Here is the HTML part of the code: <div ng-controller="MyCtrl"&g ...

javascriptangularjs

How can I empty the value of a UI widget (such as an input field, select menu, or date picker) in Webix UI?

Is there a way in Webix UI to clear widget values individually, rather than collectively based on form id? I'm looking for a method using a mixin like $$(<form-id>).clear(). I need control of individual elements, so is there a proper way to res ...

javascriptangularjswebix

Tips for submitting a checkbox value even when it is disabled

I attempted to make the checkbox readonly, but users were still able to check/uncheck the field. Next, I tried disabling the checkbox which successfully prevented user interaction. However, when attempting to submit the form, the disabled checkbox value ...

javascriptjquerycheckbox

Identify the source of an AJAX request file in PHP

I am currently developing a small application that involves multiple AJAX requests directed towards a specific file. After receiving the request, I want the PHP action file to record the source of the request and make additional decisions. Despite using $ ...

javascriptphpajax

Redirecting an Incorrect Request to a 404 Error Page

I am working on setting up a server that will allow users to access specific valid paths: localhost:9090/admin localhost:9090/project1 If a user enters any other invalid paths, they should be redirected to the root and then to the default path localhos ...

javascriptexpresshttp-status-code-404

Building custom directives in Angular.js with d3.js

Working with an angular.js directive and d3 integration can sometimes be tricky, but thanks to resources like stackoverflow it's definitely achievable. However, I'm currently facing issues with getting the arrows to display properly in my project ...

javascriptangularjssvgd3.jsdirective

Creating a button that allows users to quickly navigate back to the top of a webpage

On my website, I have a convenient "back to top" feature that allows users to easily navigate back to the top of the page: If you scroll down the page, you'll see this feature in action. This particular feature is part of the theme I'm using on ...

javascripthtmlcss

Storing data from multiple pages onto the final page using C# and ASP.Net - step-by-step guide!

I need assistance with saving an application that spans across multiple pages. Instead of saving after each step, I would like to review a summary of all the pages on the final page before saving the complete application. Can someone please guide me throug ...

c#javascriptjqueryasp.net

What methods can be used to block the input of non-numeric characters in a text field?

I stumbled upon this particular inquiry. Although, the majority of responses involve intercepting key presses, checking the key code, and halting the event if it does not match an acceptable key code. However, there are some issues with this approach. ...

javascriptjqueryregexvalidation

"Exploring unique identifiers with dc.js - a comprehensive guide to grouping data by

Utilizing dc.js and crossfilter, I am creating 3 rowcharts from a csv file. The first two rowcharts are simple to set up, but the third one requires a dimension that spans multiple columns in my input csv. To achieve this, I have restructured the data so t ...

javascriptd3.jsdc.jscrossfilter

Aerospike and NodeJS work together seamlessly, enabling the efficient pushing of data into arrays within objects

Looking for a solution to push data into an array that is stored in an object. Here's an example: db.get(key) // -> { a: 'b', b: { c: [] } } Attempting to push into b.c, but encountering an error. db.operate(key, [Aerospike.lists.appen ...

javascriptnode.jsaerospike

Adding a MTL texture to an OBJ in your three.js project is a simple process that can enhance

Hello! I am currently working on adding an MTL file to my OBJ in three.js. I had successfully loaded my OBJ and went back to address this issue. However, after adding the code to load the MTL file using MTLLoader, the code seems to be getting stuck at mt ...

javascript3dthree.js

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

javascriptjqueryhtmlcss

Implementing the Jssor slider

Recently, I've been using the jssor slider on multiple pages without any issues. However, I am now facing some challenges. Ideally, I want the slider to be hidden initially and then displayed with another script. While I have managed to achieve this v ...

javascriptjquerytwitter-bootstrapsliderjssor

Why aren't my laptop media query CSS styles being applied?

My laptop size media query is not applying the CSS styles I want. I have tried using both min and max width but without success. I am trying to replicate the layout found here: @media screen and (min-width: 960px) and (max-width:1199px){ .grid-co ...

javascripthtmlcssreactjscss-grid

Implementing authentication with JSONP requests in Angular

When using JSONP on a request with basic auth, it is necessary to include the Authorization header in the request to retrieve the token. Upon testing this: $scope.doRequest = function() { $http({method: 'JSONP', url: 'http://apilder-ap ...

javascriptangularjs

What is the best way to include a date range together with other placeholder variables in a PostgreSQL and Express setup?

Forgive me for what may be a basic question, but as I dive headfirst into teaching myself SQL & PostgresSQL, I've stumbled upon an issue. I'm attempting to insert a large number of placeholders into an INSERT statement, but I'm struggling t ...

javascriptsqlpostgresqlexpress

Hey there, I'm looking to automatically delete new users from my mongoDB atlas database if they haven't verified their phone number within 2 minutes. I believe using the TTL feature would be

Database Schema In my User schema, the field isVerified is initially saved as false. The user enters their phone number, receives a verification token via SMS, and both the token and number are saved in the database. Once the user enters the verification ...

javascriptnode.jsreactjsmongodb