Attempting to dynamically link my "ng-true-value" in AngularJS

Working with values retrieved from a database, my goal is to include a checkbox, load the description, and provide 2 text boxes – one editable and the other read-only.

Both text boxes initially display values from the database. When the checkbox is checked, the value from the editable text box should transfer to the read-only box. If unchecked, the read-only box displays '0'.

               <div ng-if="condition.ConditionDesc == 'Other'">
                    <div class="col-sm-1 unpad" ><input type="checkbox" id="OtherCheckbox" ng-disabled="condition.Score_Potential.$invalid && condition.Score_Potential.$invalid" ng-model="condition.ConditionExists" ng-true-value="{{condition.Score_Potential}}" ng-false-value="0"/></div>
                    <div class="col-sm-2 unpad">{{ condition.ConditionDesc }} </div>
                    <div class="col-sm-5 unpad"><textarea id="OtherText" cols="30" placeholder="Please Specify." rows="1"></textarea></div>
                    <div class="col-sm-2"><input type="text" id="" name="" ng-model="condition.Score_Potential" class="form-control" format="number" required /></div>
                    <div class="col-sm-2"><input type="text" id="" name="" ng-model="condition.ConditionExists" class="form-control" readonly="readonly" format="number" required /></div>
                </div>

Issue arises when typing a number in the editable textbox then checking the checkbox, only the original editable textbox value transfers to the read-only box. Any insights on resolving this?

Answer №1

To tackle this issue, you can employ some fundamental pre-processing and post-processing techniques on the model data:

Start by eliminating ng-true-value and ng-false-value, exchange the current model with a temporary model, and introduce a controller:

<input type="checkbox" id=OtherCheckbox" 
       ng-disabled="condition.Score_Potential.$invalid && condition.Score_Potential.$invalid" 
       ng-model="condition.conditionChecked" 
       ng-controller="CheckboxController" />

The controller's role is to establish a temporary model value that remains unaffected by Score_Potential adjustments:

var cond = $scope.condition
yourApp.controller('CheckboxController', ['$scope', function($scope) {
    $scope.$watch('condition.ConditionExists', function(conditionExistsValue) {
        cond.conditionChecked = (conditionExistsValue === cond.Score_Potential);
    }
}]);

During the save process: selectively assign the value of ConditionExists to Score_Potential based on our interim model value:

var cond = $scope.condition
cond.ConditionExists = cond.conditionChecked ? cond.Score_Potential : 0;

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

What is the preferred method for initiating a call from a JSP to a servlet using an href link?

Currently, I am successfully using href to call a servlet URL. However, I would like to add parameters and receive a response from this request. Is it possible to achieve this? I attempted an AJAX call but encountered a CORS issue when trying to call an ex ...

An error has occurred: Command execution failed due to lack of support for the xpath locator strategy

Encountering a problem in the desktop automation framework using C# and NUnit with WinApp Driver. I attempted to modify the locator and implemented explicit waits. Utilized Inspect Object to identify the XPath. [click here for image](https://i.stack.imgu ...

Issue with locating JavaScript controller in Angular HTML file [Node.js/Angular]

Here are all the files and folders in my project located within the same directory. If you want to check out the project on Github, you can find it here: https://github.com/JohnsCurry/learnAngular. Just to confirm, they are all in the same folder. Unfortu ...

How to achieve an endless cycle using Promise recursion in a NodeJS environment

I am planning to replace my blocking infinite while loop with promises. My run function is quite simple - it lights up an LED and then turns it off before moving on to the next one. Since Promises do not work inside while loops, I'm exploring how I c ...

Dividing functionalities in Angular

Recently, I have developed an angular application with a unique structure. In my index.js file, I have configured the application, defined routes, directives, controllers, and filters (though I am aware that this is not considered best practice). All of my ...

Rendering on the server using react-router v4 and express.js

I've been working on implementing server-side rendering with the latest version of react-router v.4. I found a tutorial that I followed at this link: . However, when I refresh the browser, I encounter the following error: Invariant Violation: React.C ...

The custom validation process encountered an error: callback is not a valid function

Encountering an issue with a custom validator in node.js while using mongoose. The goal is to verify if a query already exists in the headerLog before attempting to insert it. Take a look at the code snippet below: var mongoose = require('mongoose& ...

Is there a method in Next.js for relocating the .env file to a location external to the application folder?

Currently, I am developing a project that incorporates a Next.js application with the .env file stored in the root directory of the project. Is there a way to configure Next.js to search for the .env file in a location other than the app's root folde ...

Easily upload files using Multer without the need for specifying action, method, or encrypt="multipart/form-data" attributes in the form tag

I'm currently facing an issue while trying to upload an image using Multer and Angular's $http.post method. Instead of triggering the form submission with a submit button, I want to directly use $http.post. However, I am encountering a problem wh ...

Dynamically Add Routes in ExpressJS During Runtime

I am interested in creating routes dynamically at runtime, but I'm not entirely sure how to do it. Currently, I have the following code snippet: var app = express(); function CreateRoute(route){ app.use(route, require('./routes/customchat.js&ap ...

Issue with Material UI Textfield error functionality in React.js not functioning correctly

Currently, I am working on a functional component in combination with Material UI. Within this setup, I have constructed a form comprising of 2 textfields. My objective is to activate the error property solely under certain conditions being met. However, t ...

The trouble with dynamicHelpers in Nodejs Express

Trying to make my app run smoothly, I've set up the following configurations: app.configure(function(){ app.set('views', __dirname + '/views'); app.enable('jsonp callback'); app.set('view engine', 'j ...

RegEx in JavaScript to identify and match the innerHTML property of all elements

I am currently in the process of developing a Chrome extension that needs to identify specific pages within a website, including the Log In / Sign In page, the Sign Up / Register page, the About page, and the Contact Us page. My approach involves obtainin ...

Utilize a Sails.js Single Page Application (SPA) to route all unutilized paths to a centralized controller function

I'm currently working on a project where I am building a single page application (SPA) with Sails.js as the backend. My goal is to have all routes redirect to a single controller action. However, the issue I am facing is that when I try the following ...

Assign a temporary value to the Select component in Material UI version 1.0.0-beta.24

I am currently working on a test project using Material UI v1.0.0-beta.24, and I have noticed that the "Dropdown" menus behave differently compared to the previous version. What I am trying to achieve is setting up a placeholder in the Select component. P ...

Using custom class instances or objects within Angular controllers is a simple process

Using three.js, I have created a class called threeDimView that houses my scene, camera, and other elements. In my JavaScript code, I instantiate a global object of this class named threeDimView_. threeDimView_ = new threeDimView(); Now, I wish to displa ...

A step-by-step guide on incorporating the C3 Gauge Chart into an Angular 5 application

I have been attempting to incorporate the C3 Gauge Chart from this link into a new Angular 5 application. Below is my code within chart.component.ts : import { Component, OnInit, AfterViewInit } from '@angular/core'; import * as c3 from &apos ...

Avoiding immediate loading of data in Angular JS

I'm facing an issue with my code: (function (app) { app.controller('productListController', productListController) productListController.$inject = ['$scope', 'apiService', 'notificationService&a ...

The reference to "firebase" is not recognized within the generator-gulp-angular framework

I have utilized generator-gulp-angular I incorporated firebase and angularfire using the following commands: bower install firebase --save bower install angularfire --save After that, I included firebase in the module as shown below. angular.module(&apo ...

Can qTip 2.0 be configured to use a different default attribute instead of 'title'?

Is there a way to set qTip to use an attribute other than 'title' as the default? I need to use another attribute because when I disable qtip and add elements dynamically with "title", the title still shows when I hover over the element, which i ...