Issue: Angular JS radio input not functioning as expected

Below is the code snippet in question:

<div ng-controller="TestController">
    <input ng-repeat="item in array" ng-model="selected.name" value="{{item.name}}" type="radio"></input>
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [{
            name: 'lee',
            seq: 1,
        }, {
            name: 'tom',
            seq: 2,
        }, {
            name: 'jack',
            seq: 3,
        }];

        $scope.selected = $scope.array[0];
    });
</script>

Upon loading the page, the default checked radio box is functioning properly. However, there seems to be an issue where it cannot be unchecked, and only the other two checkboxes can be toggled. How might I go about resolving this problem?

Answer №1

When using ng-repeat, a new scope is created so it's important to identify the parent scope.

For more information, you can refer to this link.

var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [{
            name: 'lee',
            seq: 1,
        }, {
            name: 'tom',
            seq: 2,
        }, {
            name: 'jack',
            seq: 3,
        }];

        $scope.selected = $scope.array[0].name;
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestController">
  <div ng-repeat="item in array">
     <input type="radio" ng-model="$parent.selected"  
    ng-value="item.name" > 
  </div>
</div>

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

Clicking on a button in Angular UI-grid will allow you to edit the

I am currently utilizing Angular in conjunction with UI-Grid () The Grid has been configured using the options provided below this.mdGridLogOptions.gridOptions= { enableSorting: false, enableColumnMenus: false, enableAutoFitColumns: false, paginationPage ...

Encountering a 404 error with Next.js 13 dynamic routing

Whenever I click on an item, it redirects to the dynamic route "http://localhost:3000/products/{id}" but instead of displaying the data, I get an error. Here is my file structure: app components Product.js pages Products [id].js layou ...

Testing Your Angular 7 Code: Unit Testing Made Easy

I am currently working on developing unit tests for this angular script: export class DataService { private csrfToken: string = ''; private isContentShown: BehaviorSubject<boolean> = new BehaviorSubject(true); constructor(private h ...

AngularJS ui-router in HTML5 mode is a powerful combination that allows

Hey, I'm looking to implement HTML5 mode in my project. Here's how my file structure looks: mypage.de/mysub I can only make changes within the "mysub" directory. So far, I've added the following into my index.html: <base href="/mysub/ ...

Error in Discord.JS: The function message.author.hasPermission is not recognized

As I was working on creating a new command for my discord.js bot to toggle commands on/off, I ran into some issues. Specifically, when I attempted to use the .hasPermission function, I encountered the following error message: TypeError: message.author.ha ...

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

In my Angular 4 application, I encountered an issue with a date retrieved from an API call. The date is in the format '1990-03-31T23:00:00-06:00' and when attempting to create a Date object and retrieve the month using getMonth(), it returns the ...

Setting the expiry time for vue-cookie in hours Would you like to learn

I'm currently using the following code to set a 3-hour expiry for my vue-cookie: VueCookie.set('S3ID', getS3ID, 3); However, it seems that this function is actually setting the cookie expiry time as 3 days instead of 3 hours. Can anyone ex ...

AngularJS app is not initialized by ngApp, only by ng-app

Up until now, I had believed that there was no difference at all between using the different formats of Angular directive names - ngApp, ng-app, x-ng-app should all work interchangeably. However, on this particular webpage, Angular doesn't seem to in ...

Troubleshooting Error 405 in AJAX, Javascript, Node.js (including Body-Parser and CORS), and XMLHttpRequest

I have been working on creating a JSON file from buttons. While I am able to retrieve data from the JSON files that I created, I am facing issues with posting to them using XMLHttpRequest and Ajax. Interestingly, I can add to a JSON file using routes just ...

The redirect feature in getServerSideProps may not function properly across all pages

Whenever a user visits any page without a token, I want them to be redirected to the /login page. In my _app.js file, I included the following code: export const getServerSideProps = async () => { return { props: {}, redirect: { des ...

Encountering a 405 Method Not Allowed error when using Laravel in conjunction with AngularJS

After successfully setting up Laravel Homestead and AngularJS, I am encountering an issue when trying to POST or GET data from the Laravel API using the Angular app. The errors displayed in the Firefox inspector Network tab include: 405 Method Not Allowed ...

Fetching Unicode block specials using axios in getStaticProps with Next.js

Click here to view the code and data results My attempt using the fetch method was successful, but I encountered issues when trying to use 'axios' ...

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

Wait for all asynchronous functions in Node.js to finish before proceeding with the remaining code

I am facing an issue in my code where I have 2 for loops executing the same async function, but I need the code to wait until both loops finish executing before proceeding. Here is a snippet of my code: for(var a = 0; a < videoIds.length; a++){ ...

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

Utilizing JavaScript regex to remove substrings that contain parentheses

I am working with a string variable named myString that includes some unwanted content towards the end: var myString = 'The sentence is good up to here foo (bar1 bar2)'; var toBeRemoved = 'foo (bar1 bar2)'; I am looking for the best w ...

Is there a way to customize Angular's number filter?

I'm trying to achieve a consistent number format with Angular's number filter, regardless of the localization selected. After inspecting the Angular source code on GitHub, I found the implementation of the filter to be like this: function number ...

Sort the array in alphabetical and numerical order while meeting a specific condition

In my code, I am attempting to sort an array based on two conditions. Specifically, I need to ensure that Pos 10 comes after single digits and follows a specific order after that. Initially, I tried to prioritize strings containing the word first, but whe ...

What techniques can be applied to utilize JSON data in order to dynamically create menu components using the map method?

My current challenge involves dynamically generating a set of menu items using data retrieved from a JSON file. I've attempted to achieve this by mapping the values with props, but it seems like I'm overlooking something. Below is the code snipp ...