AngularJS - Make Checkbox Checked When Value is True

Here is a user json object data:

var users = [
        {
            firstName: 'Sven',
            lastName: 'Butzbak',
            userID: '1', // TODO refactor to _id
            gender: 'male',
            avatar: 'imageurl',
            notice: 'Fast fertig mit Theorie',
            'types': [
                {
                    'type': 'am',
                    'title': 'AM',
                    'icon': 'am',
                    'minAge': '16 Jahre',
                    'include-classes': 'keine',
                    'check': [
                        {
                            'id': '1',
                            'name': 'Motor anlassen',
                            'value': 'false'
                        },
                        {
                            'id': '2',
                            'name': 'Los fahren',
                            'value': 'true'
                        },
                        ...
                    ],
                    ...
                },
                ...
            ],
            'events': [
                {
                    'id': 1,
                    'name': 'Fahrstunde',
                    'date': '26.07.2016',
                    'time': '08:45'
                },
                ...
            ]
        }
    ];
    

Below is the code snippet for repeating the Check:

<ul class="user-progress check" ng-repeat="types in  user.types">
        <fieldset class="standard">
            <legend>Fragen</legend>
            <li ng-repeat="cat in  types.check">
                <div>{{cat.name}}</div>
                <div>
                    <md-checkbox ng-model="cat.value">
                        {{cat.value}}
                    </md-checkbox>
                </div>
            </li>
        </fieldset>
    </ul>
    

For reference, I found a working example on the Angular Material Website: http://codepen.io/BamiGorengo/pen/KrGQEw

After some trial and error, I attempted to modify my userService:

$scope.types.check.value = {};
    

However, this did not solve the issue. As I am not proficient in JavaScript, I struggled to find a solution...

Answer №1

To ensure proper syntax, eliminate the single quotes from the value field. Change 'value': 'false' to 'value': false

Answer №2

The issue lies in the fact that your type.value is a string and not a boolean. As a result, when the checkboxes are loaded for the first time, it does not recognize the strings 'true' and 'false' as actual boolean values. A possible solution is to adjust your code like this:

<md-checkbox ng-model="cat.value" ng-true-value="true" ng-false-value="false">

For more information on how this works, you can visit https://material.angularjs.org/latest/api/directive/mdCheckbox.

Alternatively, consider using actual boolean values instead of strings if possible.

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

Learn how to insert a <TableRow> in a for loop using Object.keys

<TableBody> {(() => { var result = []; let key = Object.keys(genericResultList)[1]; var list = genericResultList[key]; for (var i = 0; i < list.length; i++) { ***\<!-- Add in the \<T ...

Using Angular 5 to link date input to form field (reactive approach)

I'm encountering an issue with the input type date. I am trying to bind data from a component. Below is my field: <div class="col-md-6"> <label for="dateOfReport">Data zgłoszenia błędu:</label> <input type="date" formC ...

Discovering the wonders of React and Javascript through the powerful Map function

I've exhausted all my knowledge of map functions and syntax, but I keep encountering the error TypeError: Cannot read property 'action' of undefined. This issue seems to stem from this line: constructor(data=[]). Typically, I am only familia ...

Switch between dropdowns with jQuery

Issue at Hand: In the scenario illustrated below, there is a side navigation bar containing options that reveal a toggled section upon clicking. Specifically, if you select the third item labeled "Dolar" from the menu, a dropdown with three additional cho ...

Change a JavaScript object into an array with different options while still maintaining the keys

I am attempting to transform the following JavaScript object: image_uploads: [ 0: { upload_id: 50, }, 1: { upload_id: 51, }, 2: { upload_id: 52, }, ] Into separate entries using this structure for inclusion in the body of a POST r ...

Update the input value following a successful action

How can I update the value of an input field after a successful ajax call? I have tried the following approach but it doesn't seem to be working. The result from the alert is 80000 Here is the HTML input code: <input class="form-control" type=" ...

How can I incorporate an error page into this Express application?

I'm currently working on an express application that simulates a basic version of Twitter. One feature I'm trying to implement is an error page. This way, if there are any issues with the routing, users will see a friendly message instead of a g ...

Creating a Kendo Menu within an Ext JS Panel

Currently, I am experimenting with combining ExtJS and Kendo UI - a unique mix that is taking me off the usual path ;) I have managed to render a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel In case you want to check it out, here's a F ...

React - Parent Component not successfully passing Ajax data to Child Component

I have a parent component and a child component. I am using the fetch method within the componentDidMount() callback to retrieve data from an API and then set the state with key items to that data. The intention is for this data to be passed down to the ch ...

Issue #98123 encountered during execution of `npm run develop` command, related to WEBPACK

I want to start a brand new Gatsby site following the instructions provided on . Here's what I did: npm init gatsby # see note below cd my-gatsby-site npm run develop Note: I didn't make any changes to the configuration, so I'm using JavaS ...

Navigating through Next.js for slug URLs such as site.com/username

Can someone help me figure out how to create a profile page for each username, like site.com/jack or site.com/jill? I'll be pulling the username info from an API that also contains the user ID and email. I'm new to Next.js and would really appre ...

Is it possible to upload multiple files using JavaScript?

My JavaScript project can be found on GitHub. You can check out a live demo of the project here. The main goal for my HTML Button with id='Multiple-Files' is to enable users to upload multiple files, have them displayed in the console, and then ...

Any methods for integrating js.erb files in Ruby on Rails 7?

I've been searching for a while now on how to integrate js.erb files into my Ruby On Rails 7 project, but I haven't been able to find any helpful information. Have js.erb files become obsolete in Rails 7? If so, is there a way to include partials ...

Issue with rendering SVG <g> element in Backbone view

I'm currently developing an application with Backbone and running into issues with a view where the "el" property is a dynamically created <g> element. Here's the code snippet for the view: var DependencyLineView = Backbone.View.extend({ ...

When a tooltip inside a button is clicked, the hover effect is passing through to the surrounding parent element

I am facing an issue with a nested tooltip within a button. The problem arises when I try to click on the 'read more' link inside the tooltip popup, intending to go to an article. However, instead of redirecting me to the article, clicking on the ...

Dispatch in React Redux is not intercepted

I've been grappling with this issue for hours and still can't seem to find a solution. When I click the button, the function "getLocation" is being triggered (Confirmed it) However, the dispatch is not getting passed to the reducer. After r ...

Incorporate JSON information into a sleek Bootstrap modal interface

I am looking to load a JSON file to generate a list within a Bootstrap Modal. The setup I have allows for the modal to appear when clicking on a person's image. <li class="project span3" data-type="pfa"> <a data-toggle="modal" data-targe ...

Tips for implementing ngChange within a personalized directive

Looking to create a directive for a toggle button, here is the code I want to include in the directive: <div class="toggle-button" ng-class="{true: toggleTrue === true, false: toggleTrue === false}"> <button class="true" ng-click="toggleTrue ...

Is the image flickering non-stop when the button is pressed?

Every time I push the button, the image on the HTML 5 canvas flickers. After investigating, it seems like the issue might be related to the ctx.clearRect(0,0,100,500) function. Any suggestions on how to fix this problem? I'm currently working on anim ...

Using protractor's onPrepare feature to set up for various test suites

In my conf.js file, I have an onPrepare function where I handle logging into the application. This function is executed every time I run one or more test suites, allowing me to log in before running any tests. The problem arises when I do not want to logi ...