Can the value of ng-model be altered without using ng-change function?

Can the ng-model value be altered without using the ng-change function? The method below does not seem to work.

<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field">
 <div> {{field}} </div> 
</div></div>    

<script>
var myapp = angular.module('myApp', []);
myapp.controller('MyCtrl', function($scope){

if(document.getElementById("checkbox").checked){
$scope.field="YES";    

    }})

However, using the following code worked for me:

<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field" ng-change="change_text()">

<div>{{field}}</div> 

  <script>
    var myapp = angular.module('myApp', []);
    myapp.controller('MyCtrl', function($scope){

    $scope.change_text = function() {  
    $scope.field="YES";        
    }})
  </script>

Answer №1

If you want to achieve the task you have in mind, one approach is to utilize ng-true-value and ng-false-value. This allows your model to be something other than a boolean while still maintaining two-way data binding with ng-model.

Here's an example:

<input id="checkbox" type="checkbox" ng-model="field" ng-true-value="'YES'" ng-false-value="'NO'">
{{field}}

Remember to provide the values for ng-true-value and ng-false-value as string literals (enclosed in extra quotes).

Check out this demo on Plunker for more information.

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

Can you please provide me with information on how I can send messages to US numbers using a toll-free number?

I attempted to utilize this code in the SNS console, but it showed a failure. I am seeking guidance on how to send a message using a TFN number. async sendMessage(testId: number) { const mobileNo = test.customer.phoneNo; const params = { Message: ...

Discover the best way to reference a JavaScript variable within an HTML form textfield

I'm having trouble with a script that is supposed to display the selected value from a drop down list in a text field on an HTML form. When I select an option, the value is not appearing in the text field. Can someone please assist me with this issue? ...

When using @Html.ActionLink in ASP.NET MVC-5, the URL in the address bar may change, but the page does not redirect to the destination

I am experiencing an issue with my MVC view where different Angular views are displayed based on a condition. However, once the Angular views are loaded, none of the links on the MVC page seem to be working. When I click on a link in the MVC view, the addr ...

What is the process of choosing a language (English/French) within a pop-up?

<body style="text-align:center"> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Interact with me to show/hide the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> <script& ...

Adjusting Image Width with jQuery on Hover

I am trying to create a hover effect for two images placed side by side. When the user hovers over one of the images, it should expand. HTML: <a href="#"><div id="skinny"></div></a> <a href="#"><div id="room9"></div ...

Implementation of Material UI Autocomplete feature with options consisting of an array of objects linking to both ID and label properties

Utilizing the Material UI Autocomplete component in my project has been a key feature. Referencing the official documentation, here are the available options: let options = [ { id: "507f191e810c19729de860ea", label: "London" }, { id: "u07f1u1e810c19 ...

Sending target information as a property argument

I have encountered an issue with my app's two Bootstrap modals. It seems that many people are facing problems with opening the second modal. Is it possible to pass data-target and modal id properties as props in this manner: data-target={props.da ...

Emphasize identical terms in AngularJS through bold formatting

I am facing a situation where I need to apply bold formatting to specific words in an HTML string (editorData) using AngularJS, based on whether they match certain keywords (data or dataArray). It is important to note that the case of the words in editorD ...

What is the best way to retrieve the total number of nested objects within an object?

I'm trying to figure out how to get the number of nested objects in the object a. a = { firstNested: { name: 'George' } secondNested: { name: 'James' } } I thought about using .length, which is typ ...

Suggestions for breaking out of the function update()?

Having some trouble escaping my update() function. Here's the attempt I've made: if (score.l1 > 20) { break; } However, all I get is an error message saying "Illegal break statement" ...

Transmit messages from server (via Expressjs routing) to the client

I am looking for guidance on how to effectively send messages from the server to the client and incorporate this functionality into routes/index.js within my mean stack project. Can anyone provide insights on using socket.io in this context?: router.post( ...

Incorporating the inputted year into the AJAX request

At page A, there is a form that includes an input field for the year and a dropdown menu for selecting a month. <form method="post" action="" name="form_cal" id="form_cal" class="inputform"> <div class="h5"><stro ...

Filtering Arrays of Objects: A Guide to Filtering in JavaScript

Could really use some assistance with sorting an array of objects in javascript. My users array looks like this: var users = [ { first: 'Jon', last: 'Snow', email: '<a href="/cdn-cgi/l/email-protection" class="__ ...

Angular's ngRoute is causing a redirect to a malformed URL

Currently, I am in the process of developing a single-page application using AngularJS along with NodeJS and Express to serve as both the API and web server. While testing locally, everything was working perfectly fine. However, after cloning the repositor ...

Having trouble implementing String.prototype in my factory

Currently, I am working on incorporating a function mentioned in this answer. String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 's ...

When using TypeScript with custom components as children in React, the `type` returned by React.Children is a string representing the function

It might sound a bit odd, or maybe I'm completely off track here. While going through some articles and React documentation on getting children and identifying specific child components using React.Component.map(), I ran into an issue with my custom c ...

Discovering elements that are currently visible in an Angular list

Suppose there is a variable named users which represents an array We have the following ng-repeat statement: ng-repeat="user in users | filterUser: searchUser: assignedUsers: selectedDivision" After filtering the users using searchUser and selectedDivis ...

Why does my useEffect consistently execute after the initial rendering, despite having specified dependencies?

const [flag, setFlag] = React.useState(false) const [username, setUsername] = React.useState('') const [password, setPassword] = React.useState('') const [errorUsername, setErrorUsername] = React.useState(true) const [er ...

Stylus mistakenly fetches styl files from an incorrect directory

My issue involves a file named mobile.styl, which gathers all necessary styl files using the @import function: @import '../../common/styles/colors' @import '../../common/styles/init' @import 'landing' @import 'faq&apos ...

Explore the capabilities of Vue.js by creating multiple JavaScript classes within your application

<div class="container" :class="{ qwerty: !open }" :class="lower? 'left' : 'right'"> Hey there, I've noticed that Vue seems to only allow me to add one class with conditions, as shown in the exam ...