The ng-change event is triggered for radio buttons that are generated using ng-repeat the first time they appear, but not for subsequent appearances

Is it possible to trigger the updateRow method on every change of a radio button selection?

Currently, the updateRow method is only being called the first time the radio button changes. How can I make sure it executes each time there is a change?

Html:

<div ng-repeat="b in RS_BehaviorActions">
    <input id="{{b.name}}" type="radio" name="behavior" value="{{b.name}}" style="padding:10px;" ng-model="selBehaviorVal" ng-change="updateRow(obj, selBehaviorVal)" /><label>{{b.name}}</label>
</div>

js:

// Call updateRow method and push radio button value into JSON on change
$scope.updateRow = function (obj, selectedItem) {
            $scope.selectedItem = selectedItem;
            $scope.existInArray = false;
            for (var i = 0; i < $scope.permissionArray.length; i++) {
                if ($scope.permissionArray[i].relationShip == $scope.relationShip) {
                    $scope.existInArray = true;
                    break;
                }
            }
            if ($scope.existInArray) {
                for (var i = 0; i < $scope.permissionArray.length; i++) {
                    if ($scope.permissionArray[i].relationShip == $scope.relationShip) {
                        index = i;
                        break;
                    }
                }
                //$scope.permissionArray.splice(index, 1);
                $scope.permissionArray[index].behavior = $scope.selectedItem;
            }
            else {
                $scope.permissionArray.push({ "relationShip": $scope.relationShip, "behavior": $scope.selectedItem });
            }
            console.log($scope.permissionArray);
        }

Answer №1

Consider using ng-click in place of ng-change. Sharing a jsFiddle link will help us provide a more tailored solution for you.

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 best way to handle reading hefty files using the fs.read method and a buffer in JavaScript?

I'm currently delving into the world of javascript, and one of my go-to exercises when learning a new programming language is to create a hex-dump program. The main requirements for this program are: 1. to read a file provided through the command line ...

What could be causing the React-Router-Dom Outlet to not show the component?

I am working on a component that houses four different components. const ProtectedRoute = () => { return ( <> <Header /> <div className='flex h-screen overflow-hidden'> <div className="md:block h ...

What are the different methods for completing a form?

From what I understand, there are 2 methods for submitting a form. For instance, in asp.net, there is the Button.UseSubmitBehavior property which Specifies whether the Button control uses the client browser's submit mechanism or the ASP.NET postb ...

The active tab will dynamically update, however, clicking anywhere on the page will always bring you back to the first tab as

My view includes the following tabs: <div class="tabbable"> <ul class="nav nav-tabs padding-18"> <li class="active"> <a aria-expanded="false" data-toggle="tab" href="#Tab1"> <i class="green ac ...

Converting wiki content to HTML with the help of PHP and JavaScript

Looking to convert wiki syntax to html? Check out the techniques discussed in this resource: Below is the source code of my php page that appears to be functioning correctly. Feel free to test it out yourself: <? if(!defined('DOKU_INC')) d ...

How to easily transfer a JSON file to a server using Vue and Node.js

As a newcomer to the world of Node.js and Vue development, my goal is to establish a seamless process for users to create and upload a JSON file to the server when they save data in a form. This process should occur effortlessly in the background, allowing ...

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

It's not possible to add additional options to the select input in a react

Hi there! I'm currently facing an issue while trying to retrieve a list of options from the backend, map them to another list of options, and add them to a main list. Unfortunately, my attempts have not been successful. Could anyone offer some advice ...

AngularJS Vimeo API Request Error: "401 Authorization Required"

I've been experimenting with making external API calls to Vimeo from my AngularJS code using $http.jsonp. However, I keep receiving a 401 Authorization required error even though I have included my authorization key in the header. I encountered a simi ...

Improving JavaScript function by restructuring and eliminating conditional statements from within a loop

Looking for advice on how to refactor my function and eliminate the if statement inside the loop. Any suggestions would be helpful as I suspect the else condition is unnecessary. function quantitySum(array) { let sum = 0; for (let i = 0; i < array ...

Learn how to extract values from an object in Vue JS time-slots-generator and display either PM or AM based on the

Using the time-slots-generator package, I am able to display the time from 0:15 to 24:00. However, the issue is that this package does not have built-in functionality to display AM/PM, so I had to create a manual solution for it. To achieve this, I modifi ...

Utilizing Material-UI TextField with targeted onChange event handler

I wrote a function that iterates through an array of objects and creates material-ui TextField elements based on the information provided. The goal is to display an error message if the user inputs characters exceeding the defined maxLength. I want the er ...

Seeking a proficient Cloud Code specialist skilled in JavaScript, focused on managing installations and channels

My experience with Javascript is limited, but as I work on my application, I realize the necessity of incorporating it into Cloud Code. I have a Parse class called Groups where I store group data including Name, Description, Users, and Requests. Name, Des ...

Efficient communication in Angular: Sharing data among controllers and components

Recently joining a new project, I am faced with the task of implementing a small feature. In my setup, there are 2 distinct views: Cars.html and Wheels.html The Cars.html view is associated with the controller Cars.controller.js On the other hand, the W ...

Exploring the search feature within Redux and React-Native

The search functionality in redux is giving me some trouble. I have written the following code for it, but strangely enough, it's not working properly. Interestingly, the same code works perfectly when used without redux. searchItems: (name ) => ...

Result being returned from XMLHTTPRequest function

I've been experimenting with an XMLHttpRequest and managed to get the basic code functioning properly. However, I'm struggling to create a function that will return a boolean variable indicating whether it has worked or not: var xhr = new XMLHtt ...

Observing changes to attributes in AngularJS is a useful feature that allows for

I am looking to update the attribute of an element by using its id and have the element respond to this change. After trying to showcase my situation in a plunkr, I encountered issues with even getting ng-click to function properly. My goal is to invoke ...

Is it not possible to apply the .includes method on a string within a v-if directive while utilizing a computed property?

Problem I am facing an issue while trying to determine if a string contains a substring within the Vues v-if directive. The error message I receive is: TypeError: $options.language.includes is not a function The technologies I am using are Vue, Vuex, and ...

Unable to retrieve observable modifications

In my code file for handling reports, named report.service.ts, I have a method that retrieves reports data. This method simply returns a constant array of report objects from a mock source. Here is the implementation: @Injectable() export class ReportServ ...

Error message: "Unable to locate module for split-pane-react in Jest"

Attempting to run Jest tests on my component with [email protected] in a Next.js project using typescript. Encountering the following error: Cannot locate module 'split-pane-react' from 'my component path' when running the test ca ...