Inconsistencies in AngularJS ng-checked functionality

Question

Inconsistencies in AngularJS ng-checked functionality

Currently, I am utilizing angularjs in conjunction with an edit view for a form. My goal is to bind the values that were previously used. Below is the code/HTML snippet that I am working with. In addition to angularjs, I am also implementing typescript following the controller as format.

HTML:

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="Ctrl.Foo.Type" ng-value="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

Typescript JS For getting Foo

Foo:any;
getFoo = (Fooid) => {
    this.FooResource.getFooById(Fooid).then((response) => {
        this.Foo= response.data;
    });
};

While I am able to retrieve all the values successfully and everything appears to be binding properly, I am encountering an issue with the radio buttons. Upon inspecting the HTML element, I notice that the radio button is set to checked="checked". Furthermore, I have confirmed that the expressions in the HTML output as expected. However, the radio button selected state (the dot indicating selection) seems to be inconsistent. There are times when it works as intended, but other times it does not. It appears that the types load and Foo load at different times, which could be a contributing factor.

angularjs typescript angularjs-ng-checked

Answer 1

Answer №1

When working with radio buttons, it is important to properly bind the values to avoid inconsistent behavior. In the code snippet provided, the usage of ngModel and ngValue to bind multiple values to the radio button can lead to unexpected results.

Here is an alternative approach:

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

or

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-value="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

Refer to the documentation for more information.

----EDIT----
Consider this revised code without using ngChecked:

<div ng-app ng-controller="myCtrl">
    <label>Enter a character</label>
    <input type="text" ng-model="Ctrl.Foo.TypeName">
    <div ng-repeat="type in Ctrl.types">
        <input type="radio" name="Type" ng-model="Ctrl.Foo.TypeName" ng-value="type.TypeName" required />{{type.TypeName}}
    </div>
</div>

View the interactive example on JSFiddle.

Answer 2

When working with radio buttons, it is important to properly bind the values to avoid inconsistent behavior. In the code snippet provided, the usage of ngModel and ngValue to bind multiple values to the radio button can lead to unexpected results.

Here is an alternative approach:

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

or

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-value="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

Refer to the documentation for more information.

----EDIT----
Consider this revised code without using ngChecked:

<div ng-app ng-controller="myCtrl">
    <label>Enter a character</label>
    <input type="text" ng-model="Ctrl.Foo.TypeName">
    <div ng-repeat="type in Ctrl.types">
        <input type="radio" name="Type" ng-model="Ctrl.Foo.TypeName" ng-value="type.TypeName" required />{{type.TypeName}}
    </div>
</div>

View the interactive example on JSFiddle.

Answer 3

Answer №2

To resolve this issue, I made a modification by creating a function within ng-checked instead of using an expression. In the function, I checked for a condition and returned true or false. Additionally, I made sure to set the ng-model to the selected value before returning. This important step was previously overlooked, as shown in the example below.

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="Ctrl.Foo.Type" ng-value="type.TypeId" required ng-checked="Ctrl.isTypeChecked(type)" />
    {{ type.TypeName }}
</label>

JS:

isTypeChecked = (t) => {   
    if (t.TypeName === this.Foo.TypeName) {
        this.Foo.Type = t.TypeId;
    }    
    return t.TypeName === this.Foo.TypeName;
};

The getFoo function remains unchanged from its previous state.

Answer 4

To resolve this issue, I made a modification by creating a function within ng-checked instead of using an expression. In the function, I checked for a condition and returned true or false. Additionally, I made sure to set the ng-model to the selected value before returning. This important step was previously overlooked, as shown in the example below.

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="Ctrl.Foo.Type" ng-value="type.TypeId" required ng-checked="Ctrl.isTypeChecked(type)" />
    {{ type.TypeName }}
</label>

JS:

isTypeChecked = (t) => {   
    if (t.TypeName === this.Foo.TypeName) {
        this.Foo.Type = t.TypeId;
    }    
    return t.TypeName === this.Foo.TypeName;
};

The getFoo function remains unchanged from its previous state.

Inconsistencies in AngularJS ng-checked functionality

Answer №1

Answer №2

Similar questions

Retrieve the initial element from a JSON object to identify errors, without being dependent on its specific key name

Strategies for effectively mocking an Angular service: During Karma Jasmine testing, ensure that the spy on service.getShipPhotos is expected to be called once. In the test, it should

Ways to prevent scrolling in Angular 6 when no content is available

What steps should I follow to bring a telegram bot to life? Is it an issue if I try to integrate a module from Deno

I need to compile a comprehensive inventory of all the publicly accessible attributes belonging to a Class/Interface

What is the best way to retrieve information utilizing Http.get within my project?

How can I implement the vm. syntax using ControllerAs in my application?

What is the alternative parameter to use instead of onChange in React Router v4?

Interactive form control for location details including country, state, district, and town

Neglect variables that have not been declared (TypeScript)

Incorporating AngularJS into your current JavaScript code base

Errors can occur when using TypeScript recursive types

Ways to include various inputs with chip

In React-Native, implement a function that updates one state based on changes in another state

AngularUI design pattern for redirecting to a URL post login

Is it possible for recursive type definitions to handle generics effectively?

To enhance VS IntelliSense and type checking in react-intl's FormattedMessage component, assign an id that aligns with a custom TypeScript interface

The AngularJS directive seems to be having trouble receiving the data being passed through its scope

Manipulating Hyperlinks outside the Angular JS applicationIn certain cases, Angular JS

Submitting a form from a non-AngularJS application to an AngularJS app requires URL rewriting