Having trouble modifying the Input with split() in angularJS

Question

Having trouble modifying the Input with split() in angularJS

I am faced with a nested JSON object that contains an array as one of its properties. Each item in the array is separated by a ';'.

My goal is to use ';' as a delimiter to split each array item and make necessary changes. However, I am having trouble editing the splitted array items.

After making the changes, I need to join them back together as they were originally. The issue lies in splitting the array item based on the delimiter but not being able to edit it.

Here is my JSON object:

{
    name:"test1",
    xdata:["1;2;3","abhsad"]
}

You can view the code on Plunker: http://plnkr.co/edit/VYTQ6jvJ1bCKosRXh2Nt?p=preview

javascript arrays angularjs json angularjs-scope

Answer 1

Answer №1

While it may seem a bit complex, achieving this is still within reach. The process involves utilizing two ngRepeat loops along with some ngInit/ngChange manipulations to initialize and update certain elements:

angular.module('demo', []).controller('DemoController', Ctrl);

function Ctrl($scope) {
  $scope.group = {
    name: "test1",
    xdata: ["1;2;3", "abhsad"]
  }
}

<script src="//code.angularjs.org/1.5.5/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">

  <div ng-repeat="(i, val) in group.xdata track by $index" 
       ng-init="parts = val.split(';')">
    
    <input type="text" 
           ng-model="part" 
           ng-repeat="(j, part) in parts track by $index" 
           ng-change="parts[j] = part; group.xdata[i] = parts.join(';')">
  </div>

  <pre>group = {{group | json}}</pre>
</div>

Answer 2

While it may seem a bit complex, achieving this is still within reach. The process involves utilizing two ngRepeat loops along with some ngInit/ngChange manipulations to initialize and update certain elements:

angular.module('demo', []).controller('DemoController', Ctrl);

function Ctrl($scope) {
  $scope.group = {
    name: "test1",
    xdata: ["1;2;3", "abhsad"]
  }
}

<script src="//code.angularjs.org/1.5.5/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">

  <div ng-repeat="(i, val) in group.xdata track by $index" 
       ng-init="parts = val.split(';')">
    
    <input type="text" 
           ng-model="part" 
           ng-repeat="(j, part) in parts track by $index" 
           ng-change="parts[j] = part; group.xdata[i] = parts.join(';')">
  </div>

  <pre>group = {{group | json}}</pre>
</div>

Answer 3

Answer №2

To handle each individual value, a separate model needs to be created. This model will then update the corresponding model when the value in the text box is changed. Afterwards, a function can be written to update the xData values.

Check out this example plnkr http://example.com/sample

Answer 4

To handle each individual value, a separate model needs to be created. This model will then update the corresponding model when the value in the text box is changed. Afterwards, a function can be written to update the xData values.

Check out this example plnkr http://example.com/sample

Having trouble modifying the Input with split() in angularJS

Answer №1

Answer №2

Similar questions

JavaScript - Receiving alert - AC_RunActiveContent.js needed for this page to function

How to nullify the valueChanges pipe in Angular RxJS until the observable is resolved

Vue.js Components Facing Build Issues

Angular parse:syntax ERROR - An unexpected issue has been encountered

Struggling to display filtered content in React using State

What is the best way to store multiple forms in a single request using React?

Enhance the step implementation in Cucumber-js

Having Issues with Loading More Button Functionality in Selenium Automation

Ways to retrieve an input field value without triggering form submission

Modify the website address and show the dynamic content using AJAX

In regards to the preceding element within an array composed of strings

Assign an attendee the role of organizer in the Google Calendar API

Is there a way to prompt the native browser message for HTML5 form validation on a custom element?

Looping through the ajax data to populate ion-item elements

What is the best way to link function calls together dynamically using RXJS?

The largest contentful paint is anticipating an unidentified event

Is there a way to convert a JSONObject to a .csv file in GWT?

Ways to bypass browser pop-up blockers when using the window.open function

Installing Eclipse for PHP and JavaScript on your computer is a simple process. Here

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input