Issues with ng-repeat causing radio group malfunction

A star rating is required for each item in the list, but it is not producing the expected results.

The star rating of every item seems to impact the first row.

Even after changing the name attribute by adding -{{$index}}, the issue persists.

This is how my HTML looks:

<div ng-repeat="item in $ctrl.serviceList | filter: $ctrl.form.searchKey" class="c-list">
        <md-card>
            <div class="group full-width pad15">    
                <div><strong>Summary:</strong>{{item.problemSummary}}</div>
                <div style=" word-wrap: break-word">
                    <strong>Description:</strong>

                    <span>{{item.serviceDescription}}</span>
                </div>
                <div>
                    <strong>Docket Id: </strong>
                    <span>{{item.docketId}}</span>
                </div>
                <div><strong>Transaction Id: </strong>{{item.tid}}</div>
                <div><strong>Created At: </strong>{{item.createdAt | date: 'medium'}}</div>
                <div><strong>Created By: </strong>{{item.userName}}</div>
                <div><strong>Status: </strong><span class="status-text-complete">{{item.status}}</span></div>
                <div style="border-top: 1px solid #ccc;">
                    <div class="stars">
                        <form>
                            <input class="star star-5" id="star-5" type="radio" name="star-{{$index}}" value="1" ng-model="item.rating" />
                            <label class="star star-5" for="star-5"></label>
                            <input value="2" class="star star-4" id="star-4" type="radio" name="star-{{$index}}" ng-model="item.rating"/>
                            <label class="star star-4" for="star-4"></label>
                            <input value="3" class="star star-3" id="star-3" type="radio" name="star-{{$index}}" ng-model="item.rating"/>
                            <label class="star star-3" for="star-3"></label>
                            <input value="4" class="star star-2" id="star-2" type="radio" name="star-{{$index}}" ng-model="item.rating"/>
                            <label class="star star-2" for="star-2"></label>
                            <input value="5"  class="star star-1" id="star-1" type="radio" name="star-{{$index}}" ng-model="item.rating"/>
                            <label class="star star-1" for="star-1"></label>
                        </form>
                    </div>
                </div>
            </div>
        </md-card>
    </div>

UPDATE

ctrl.serviceList = response.results;


var response = {"results":[{"_id":"587f15ba2aaf761914c89498","createdAt":"2017-01-18T07:14:02.733Z","docketId":"MPA001218012017124402","mId":"5869efdd160812d78923ed9c","mobile":"9999999999","name":"new user","problemSummary":"Training Required","serviceComments":"asfsfsf","serviceDescription":"Training Required for this POS","serviceRating":3,"serviceSubType":"Re-training  request","serviceType":"Training required","source":"MPA","status":"Complete","tid":"7895451455","userName":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89edfce4e4f0c9e7faece0fda7eae6e4">[email protected]</a>","__v":0},{"_id":"5880b48d85cce60d684abc98","createdAt":"2017-01-19T12:43:57.200Z","docketId":"MPA001219012017181357","mId":"5869efdd160812d78923ed9c","mobile":"9999999999","name":"new user","problemSummary":"g67675676","serviceComments":"ghgjghjhjthjhjthjhyjhjhjhh","serviceDescription":"hyjtyj","serviceRating":2,"serviceSubType":"Re-training  request","serviceType":"Training required","source":"MPA","status":"Complete","tid":"7895451456","userName":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d0c1d9d9cdf4dac7d1ddc09ad7dbd9">[email protected]</a>","__v":0}],"start":0,"end":2,"total":2,"isLastPage":true,"isFirstPage":true}

Answer №1

After working on your question, I have written some code here that indicates you should update the value attribute to ng-value attribute in your radio elements. Using ng-value will modify the property in your item.

<input ng-value="3" class="star star-3" id="star-3" type="radio" name="star-{{$index}}" ng-model="item.rating"/>

You can find my demonstration on jsfiddle: http://jsfiddle.net/y6sc0g4k/2/

Answer №2

Avoid using the name attribute unless necessary. If you do not need to bind anything in the value, there is no need to use ng-value either; simply stick with value. Check out this example for more information:

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

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

Issues arise with jQuery while working with an array of promises

function bar() { var promiseArray = []; $.each(options, function (index, option) { promiseArray.push( someAjaxFunction(option) ); }); return $.when.apply($, promiseArray); } In my code, there is a function called bar() This funct ...

Experiencing a lack of data within the local storage feature of ReactJS

I'm encountering an issue where, upon clicking the submit button, my local storage remains empty even though I have data in my array of objects. Despite assigning values to the localArray variable using titleDesMap, the data is not being stored in th ...

The error message states: "An attempt was made to destructure a non-iterable object. In order for non-array objects to be iterable, they must have a [Symbol.iterator

I need to call a RTK query endpoint from a function const [getCityCode, { isLoading, error, data, isSuccess, isError }] = useLocationQuery(); const getLocationDetails = async () => { const queryItems = { latitude: lat, longitude: long }; await getC ...

Controller and Directive both setting up isolated scope for a shared element

Having trouble with adding the ng-intro-options attribute to the HTML element. The Issue var App = angular.module('MyApp', ['infinite-scroll', 'angular-intro']); App.controller('MyController', ['$scope', ...

Which is the better option for opening a link in a button: using onclick or href?

What is the most effective way to open a link using a button? <button type="button" onclick="location='permalink.php'">Permalink</button> <button type="button" href="index.php">Permalink</button> ...

I'm experiencing very slow page load times in dev mode with Next.js (30s+). What could be the reason behind this sluggishness?

QUESTION: Encountering a similar issue (but with different files): https://github.com/vercel/next.js/discussions/17977 I've already tried all the suggestions provided in that discussion. This is what the page load process looks like in development ...

Encountering a problem with the Batarang tool while constructing a MEANJS demo (Uncaught TypeError: Unable to access property 'getToggleElement' of null)

Trying to utilize the AngularJS Batarang while learning to create a MEANJS App. You can find the tutorial here: Noticing that my "Scopes" tab appears differently compared to the tutorial video and an error is displayed. Here is what I see in my Batarang ...

I'm receiving a 404 error on my API route in next.js - what could be causing this

What could be causing the error message "GET http://localhost:3000/api/db/getRideTypes 404 (Not Found)" when attempting to fetch data from the sanity client? Here is a snippet of code from Rideselector.js: //"use client"; import Image from &apo ...

Steps for Displaying Data from API Response in Vue.js

Immediately rendering the following template, without waiting for the API call to complete. I came up with a solution using v-if to prevent elements from rendering until the data is available. However, this seems to go against the DRY principle as I have ...

Issue with jQuery: Function not triggered by value selection in dynamically created select boxes

I am in need of some assistance with my code that dynamically generates select drop down menus. I want each menu to trigger a different function when an option is selected using the "onchange" event, but I am struggling to implement this feature. Any hel ...

Invoke a TypeScript function within JavaScript code

As a result of the limitations of IE10 and earlier versions, I find myself in need to reimplement the Import/Upload functionality that I had initially created since FileReader is not supported. After some consideration, I have opted to utilize an iFrame in ...

applying the "active" class to both the parent and child elements

Looking for a way to apply an active class to both the parent and child elements when a user clicks on the child element within a list. The HTML structure is as shown below:- <ul class="tabs"> <li class="accordion"><a href="#tab1"> ...

Submit JavaScript information to page B

Here is the JavaScript code I am using: $.get( "/upload/number.php", function( data ) { alert( "Data Loaded: " + data ); }); This code makes a call to number.php, which returns a number. When I run this script, I see th ...

Exploring the Synergy Between Play 2.3.x, Webjars, and Requirejs: Unveiling

Queries: Is there a way to streamline the process of setting paths and shims in requirejs for webjars and their dependencies without manual intervention? (Especially for webjars that include a requirejs.config() call?) Does anyone have a straightforward e ...

The firing event is not being triggered for Angular's rootscope.brodcast

My controller is responsible for broadcasting the request on every button click, but unfortunately it's not triggering any event. app.controller("education-blog", function ($scope, $http, $state, $ionicPopup, blogfav,URL, educationB, $cordovaSocialSh ...

missing method in HTML/JavaScript

Just experimenting with functions and time... The outcome is showing as undefined on the live server. However, if I execute the JavaScript code separately, the correct greetings display. Why is this happening? Is there a solution to rectify it? const tod ...

Steps for configuring a switch to display a color at random

Looking for a way to modify colors of a basic switch <body> <label class="toggle"> <input type="checkbox"> <span class="slider"></span> </label> </body> .toggle { --width: 80px; ...

Integrate a personalized module into your Angular application

<html> <head> </head> <body> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> <script type="text/javascript"> var myAppName = "newName"; v ...

Regular expression looking for a single letter followed by a space, and then one or more digits

I attempted the following patterns: /[A-Za-z]++[ ]*+[1-9]/ and: /^[\D*]+[\s]+[\d]/ However, they are not producing the desired results. Any suggestions? ...

Locating items based on checkboxes and dropdown selection

My goal is to calculate the sum of certain numbers based on checkboxes and a select option. Below is the code I am using: <div class="container"> <select> <option value="1">1</option> <option value="2">2</option> <o ...