AngularJS radio buttons are a key feature of the

I am encountering an issue where ng-value works with integers but not with strings. I'm puzzled as to why this is happening. Any insights on this matter?

<input type="radio" name="grupoRadio" ng-value="1" ng-model="valor"> Coverage certificate without staff payroll 
 <br>
<input type="radio" name="grupoRadio" ng-value='CNC' ng-model="valor"> Coverage certificate with full staff payroll
 <br>
<input type="radio" name="grupoRadio" ng-value="CNP" ng-model="valor"> Coverage certificate with partial staff payroll

Answer №1

Using the ng-value attribute is appropriate when you need to assign a variable defined in the scope. If you want to set static data, the value attribute of the input element can be utilized, as shown below:

<input type="radio" name="grupoRadio" value="1" ng-model="valor" > Certificado de cobertura sin nómina de personal
 <br>
<input type="radio" name="grupoRadio" value='CNC' ng-model="valor" > Certificado de cobertura con nómina de personal completa
 <br>
<input type="radio" name="grupoRadio" value="CNP" ng-model="valor">  Certificado de cobertura con nómina de personal parcial

If you have variables that need to be bound, you can utilize the following approach:

$scope.data = [{
    {text: 'Certificado de cobertura sin nómina de personal', value: '1'},
    {text: 'Certificado de cobertura con nómina de personal completa', value: 'CNC'},
    {text: 'Certificado de cobertura con nómina de personal parcial', value: 'CNP'}
]

<span ng-repeat="item in data">
    <input type="radio" name="grupoRadio" ng-value="item.value" ng-model="valor" > {{item.text}}
</span>

Answer №2

Remember to wrap strings with single quotes ' in JavaScript files.

For example: ng-value="'CND'"

<div>
<input type="radio" name="grupoRadio" ng-value="1" ng-model="valor" > Coverage certificate without personnel roster
 <br>
<input type="radio" name="grupoRadio" ng-value="'CNC'" ng-model="valor" > Coverage certificate with complete personnel roster
 <br>
<input type="radio" name="grupoRadio" ng-value="'CNP'" ng-model="valor">  Coverage certificate with partial personnel roster

Check out the fiddle here:

https://jsfiddle.net/7r5yvbsj/2/

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

The execution of my JavaScript code does not pause for the completion of an ajax request

I'm currently working on a register validation code in JavaScript. One of the key aspects checked by the validation function is whether the email address provided by the user already exists in the database. To handle this, I'm implementing ajax, ...

Using arrow functions in Vue Pinia getters to access other functions

sample shop getters: { setNewName: (state) => (string: string) => { state.user.username = string; }, updateUser: (state) => { setNewName('Tom'); // setNewName is not defined. } } Is there a way to access ...

Showing the version number of a POM in AngularJS

What is the best method for displaying the version number from a POM file in an Angular App efficiently? I am currently running a REST application on Tomcat. I believe there are several possible solutions: Implement a REST service that sends the applic ...

Executing the second function following the execution of the first function and retrieving the data, utilizing react with redux

When working with pure React, I make sure to execute the clickActive function within the getTodos function once the data has been successfully fetched from the server. getTodos = () => { const url = 'https://jsonplaceholder.typicode.com/todo ...

Exploring nested JavaScript attributes using a personalized, dynamic approach

When working with this JavaScript object, the goal is to access its nested properties dynamically using a method that begins with 'get' followed by a CamelCased attribute name (provided that the attribute is defined in the initial object). While ...

What is the process for validating dates using JavaScript?

I'm currently working on a birthday validation form using JavaScript and I'm facing some issues. For instance, the date 40/40/2012 should be considered invalid but no alert is being triggered. Here is the JavaScript code: function validateBirth ...

Manipulating DOM elements using JavaScript Vanilla with the Jquery <<S.fn.init [selector]>> framework

I have a project where I need to switch the logic written in jQuery to vanilla JavaScript. Here is an overview of my code: I am using the keydown event on an input element to trigger a function that searches an API based on the input value. var selectedU ...

Having difficulty grasping the concept of integrating Google Sheets API into my project

Being a newbie in web development, I am trying to extract data from a Google sheet and visualize it within a Javascript-animated canvas object. However, navigating through the Google Sheets API documentation has been quite challenging for me. Although my ...

Tips for displaying identical tab content across various tabs using jquery or javascript

For instance, if we have tabs labeled as 1, 2, 3, 4, and 5, and a user has selected tabs 2, 3, and 4, how can we display the same content for those tabs while showing different content for the remaining ones? ...

Ionic platform ready event triggers twice

Seeking advice on preventing an event from firing twice. I attempted to use a boolean variable at the controller scope level to check if the event has already fired, but it was unsuccessful. It seems like the event is triggering on two separate threads and ...

Implementing html5mode in Express.js and Angular.js for cleaner URLs

I've been working on resolving the issue of avoiding # in my Angular app with an ExpressJS server-side setup. I found a solution to enable html5mode and it worked well. However, whenever there is another 'get' request to fetch data from a di ...

What are some creative ways to conceal an object?

const r1 = Math.floor(Math.random() * 255); const g1 = Math.floor(Math.random() * 255); const b1 = Math.floor(Math.random() * 255); $(".color1").click(function (){ $(this).css("background", "rgb(" + r1 + "," + g1 + "," + b1 + ")"); ...

Adjust the ng-show attribute in a different controller

I am attempting to toggle the visibility of a div using ng-show. Specifically, I have a navbar that should only be displayed in certain views. I have one controller managing the behavior of this div, and another controller where I want to manipulate the v ...

Converting a multidimensional array into a JSON string using the json_encode

I've been experimenting with json_encode techniques for a while now, but I'm still struggling to achieve my desired outcome. I have developed a PHP function that reads data from a CSV file and stores it in a multidimensional array (pretty confid ...

How can I pass an argument to Node within a package.json script instead of the script itself?

In my project's package.json, I have a script that looks like this: "scripts": { "test": "... && mocha --full-trace test/db test/http test/storage test/utils", I am trying to pass the --async-stack-traces o ...

Jquery: Pressing Enter will cause the input field to lose

Take a look at this fiddle I created: http://jsfiddle.net/7wp9rs2s/. This is the progress I have made on my project so far. In the fiddle above, you can double click on one of the 4 items and a textbox will appear for editing. Instead of clicking out of t ...

Creating a dynamic div and populating it with data from various elements in separate xhtml files: a step-by-step guide

I am looking to dynamically add a div under the div tag with id "includedContent" in the code below. Additionally, I would like to modify the load method to accept an array of ids instead of a hardcoded Id(123) and display the data in the dynamically creat ...

Monitoring Javascript inactivity timeouts

As I work to incorporate an inactivity timeout monitor on my page, the goal is to track whether individuals working from home are present at their desks or not. The Jquery plugin http://plugins.jquery.com/project/timeout that I am utilizing initiates a ti ...

AngularJS does not clear the array after a POST request is made

ISSUE Greetings! I am encountering an odd behavior with my backend. When I submit data, everything works flawlessly. However, if I press ENTER and submit an empty field, it reposts the previous value. Initially, I cannot submit an empty field, but after e ...

Switch ng-model in Angular to something different

I am looking to transform my own tag into a template <div><input .../><strong>text</strong></div> My goal is to have the same values in both inputs. Check out the plunker here If I change the scope from scope: {value:' ...