Resolving Conflicts Between ng-model and ng-checked for Radio Buttons in AngularJS: Best Practices

Problem Background and Phenomenon Analysis

In AngularJS web applications integrated with PostgreSQL, developers frequently encounter pre-selection issues with boolean-based radio buttons. A typical scenario involves loading user data from a database into forms where "Yes/No" option radio buttons fail to correctly display saved states. Initial implementations often use both ng-model and ng-checked directives simultaneously:

<input type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
<input type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />

Although HTML source code shows the correct checked attribute, radio buttons remain unselected in browser rendering, requiring two clicks to toggle states. This stems from PostgreSQL returning boolean values as strings, creating mismatches with JavaScript's strict type comparisons.

Directive Conflict Mechanism Analysis

ng-model and ng-checked have different data binding priorities in AngularJS. ng-model establishes two-way data binding, while ng-checked only performs one-way attribute setting. When both act on the same element, ng-model's update mechanism overrides ng-checked's initial state. More critically, the value attribute stores strings "TRUE"/"FALSE", while ng-checked expressions compare string boolean values 'true'/'false'. This case and format discrepancy causes conditional evaluations to always return false.

Solution Implementation

According to AngularJS official documentation recommendations, only ng-model should be used with the ng-value directive:

<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />

Data type conversion is required in the controller:

app.controller('peopleCtrl', function($scope, peopleFactory){
    peopleFactory.getPerson(personParams).then(function(data){
        $scope.person = data;
        // Convert string boolean to JavaScript boolean type
        $scope.person.billing = data.billing == 'true';
    });
};

This implementation ensures ng-model binds to actual boolean values, with ng-value providing option values, achieving complete type matching.

Technical Principle Deep Analysis

AngularJS radio button mechanism relies on strict equality comparison between ng-model and option values. When using the value attribute, comparisons involve strings; with ng-value, arbitrary expression values can be bound. String boolean values returned by PostgreSQL require explicit conversion to JavaScript boolean types; otherwise, loose comparisons with == may produce unexpected results. For example, "false" == false evaluates to false in JavaScript, and "true" == true also evaluates to false, explaining why ng-checked conditions in the original implementation remained unsatisfied.

Best Practices Summary

When handling radio buttons with database boolean values, follow these guidelines: 1) Avoid mixing ng-checked and ng-model; 2) Use ng-value instead of the value attribute; 3) Unify data types in controllers; 4) Leverage AngularJS's built-in form validation mechanisms. This approach not only resolves pre-selection issues but also ensures clarity and maintainability in data binding, particularly suitable for enterprise applications requiring integration with diverse data sources.