The selected checkbox value does not take effect when used within an ng-if statement

Even though the ng-model value is present, it is not applied to the checkbox under ng-if. The update only occurs on double click.

<div ng-show="isTrue == true">
<label>
  <input type="checkbox" name="test1" ng-model="a.testModel[0]" ng-true-value="1" ng-false-value="0" /> Testing 1 {{a.testModel[0]}}</label>
<br />
<label>
  <input type="checkbox" name="test2" ng-model="a.testModel[1]" ng-true-value="1" ng-false-value="0" /> Testing 2</label>
<br />
<label>
  <input type="checkbox" name="test3" ng-model="a.testModel[2]" ng-true-value="1" ng-false-value="0" /> Testing 3</label>
<br />
<input type="button" ng-click="submit()" value="Submit" />

For a demo, you can visit the Plunker link here

Answer №1

It is recommended to utilize string values for ng-true-value and ng-false-value like

ng-true-value="'1'" ng-false-vale="'0'"
because the array in use stores its values as strings.

<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8>
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script>
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.setTrue = function () {
                $scope.isTrue = true;
            }
            $scope.name = 'World';
            $scope.a = {};
            $scope.a.testModel = ["1", "1", "0"];
            $scope.submit = function () {
                console.log($scope.testModel);
            };
        });
    </script>
</head>

<body ng-controller="MainCtrl">
    <button ng-click="setTrue()">set true - {{isTrue}}</button>
    <div ng-show="isTrue == true">
        <label>
            <input type="checkbox" name="test1" ng-model="a.testModel[0]" ng-true-value="'1'" ng-false-vale="'0'" /> Testing 1 {{a.testModel[0]}}</label>
        <br />
        <label>
            <input type="checkbox" name="test2" ng-model="a.testModel[1]" ng-true-value="'1'" ng-false-vale="'0'" /> Testing 2</label>
        <br />
        <label>
            <input type="checkbox" name="test3" ng-model="a.testModel[2]" ng-true-value="'1'" ng-false-vale="'0'" /> Testing 3</label>
        <br />
        <input type="button" ng-click="submit()" value="Submit" />
    </div>
    <pre>{{testModel|json}}</pre>
</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

Duplicate entries in the angular-ui Calendar

I've implemented the Angular-UI calendar to showcase some events. My activity controller interacts with the backend service to fetch the data, which is then bound to the model. //activity controller $scope.events = []; Activities.get() ...

Error: The reset function cannot be executed on $(...)[0]

Purpose My aim is to clear a form once it has been successfully submitted. Problem Upon submitting the form, I encounter the error message in my console: Uncaught TypeError: $(...)[0].reset is not a function When examining the content before resetting, ...

Shadows for directional light in three.js

http://jsfiddle.net/wp6E3/3/ var camera, scene, renderer; var cubes = []; init(); animate(); function init() { scene = new THREE.Scene(); scene.add(new THREE.AmbientLight(0x212223)); for (var i = 0; i < 10; i++) { var cubeGeomet ...

Faulty toggle functionality within a JavaScript-created accordion panel

HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...

Encountering undefined data when trying to access returned JSON data through jQuery Ajax

Utilizing the MVC approach, within my javascript code, I am encountering a discrepancy. Upon using console.log(data.msg) in the success function, the desired result is achieved. However, when attempting to employ $('#res').text("".data.msg), an ...

Modifying ID styling using JavaScript on Internet Explorer

I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...

Limit the options in jQuery UI auto-complete to search by name from a variety of JSON responses

I am looking to enhance my search functionality by utilizing jqueryUi's auto-complete feature to specifically target Names and exclude other array values such as fax. Here is how I have implemented it in php: <?php require_once 'db_conx.php&a ...

Unidentified variable in Angular Ajax function when accessed outside its scope

Currently, I am in the process of creating a ticket admin table. However, I am facing some challenges with exporting a variable outside of an ajax function. Here is my code: app.controller('bodyController',function($scope,$http,$sce){ $scope.ti ...

Encountering a "window not defined" error while implementing Leaflet in my Nuxt JS application

I'm encountering an issue while trying to generate my nuxt app, specifically on my 'Area' page. It seems like the error is related to the leaflet maps being used on this page. https://i.sstatic.net/Cj9ai.png Initially, I attempted to resol ...

Tips for converting an Array object to JSON format

After much effort, I have finally managed to format my data as valid JSON with the following Javascript code: var roles = getSelectedRoles(); // returns an Array object /* TODO: Explore better methods for incorporating roles into JSON data */ var rolesSt ...

What is the best way to launch $uibModal from a modal Controller?

Below is a snippet of my code: app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, newEmployee){ $scope.addNewVehicle=function(){ // I need to open a modal here }; }); ...

Mozilla Extension: Run code on initial launch

Currently in the process of building an add-on and looking to implement specific code for its initial run. What I aim to achieve is clicking on the add-on button, navigating through files, and selecting an executable file. This browsing action should only ...

Which NPM packages are necessary for implementing modular Vue components?

While I have experience with traditional multi-page applications created using HTML + JS libraries and server-side rendering (SSR), I am relatively new to modern web development. Currently, I am learning Vue JS (the latest version) through online tutorials ...

A dedicated folder for hosting the static assets generated by Nuxt.js

I have a quick question I'm looking to create a dedicated directory for the static files generated by Nuxt Js Currently, Nuxt Js compiles all files into a single directory called 'dist' As I am utilizing Django Server as my backend, I nee ...

Employ a unique filter within the controller of your AngularJs directive

Current Situation I currently have an array of users with their information and I am using ng-repeat along with a custom directive to create HTML user cards. The scope for each card is specific to the individual user. Within the user model, there is a v ...

Tips for utilizing .env variables within npm scripts

I have set the following variable in my .env file: SHOPIFY_STORE_URL=mystore.myshopify.com Now, I am looking to utilize this variable in an npm script like so: "scripts": { "shopify-login": "shopify login --store=SHOPIFY_STO ...

Running Jquery after the DOM has loaded in an Angular Js environment can be achieved by utilizing specific

When developing a single page application with Angular, I have implemented multiple views that load various page content. My goal is to set the initial focus on the first input element for all screens using an Angular script, instead of manually adding the ...

Is there a way to verify the availability of an authenticated resource without triggering a pop-up for credentials in the browser?

I am facing the challenge of fetching data from a web service located on a different server without knowing if the user has an active session on that server. If the user does have a session, I want to retrieve the data automatically. However, if they do no ...

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

Executing a C# method from within a .js file using a Javascript function in a .cs file

I've made some updates based on the responses provided. My main area of confusion lies in the 'data' parameter and how to handle it in the JavaScript call. C# method [HttpPost] public string GetPreviewURL(string activityID) ...