Discovering the right row to input the data and successfully integrating it: What is the best

Below is the code I am using to add a new task:

<fieldset>
 <legend>Create New Task</legend>
<input type="text" ng-model="subtaskname" placeholder="Subtask Name" ><br />
<select id="s1" ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<button type="button" ng-click="addTask()">Add Task</button>
</fieldset>

To display a table with the data, use the following code:

<table border="1" cellpadding="10">
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Age
      </th>
      <th>
        Title
      </th>
      <th>

      </th>
    </tr>
  </thead>
  <body>
    <tr ng-repeat="data in activity">
      <td>
        {{ data.subTaskNames }}
      </td>
      <td>
        <select ng-model="data.taskShedule" ng-options="item as item.name for item in items track by item.id"></select>
      </td>
      <td>
         <button type="button" ng-click="removeTask($index)">Remove Task</button>
      </td>
    </tr>
  </body>
</table>

Working example: http://plnkr.co/edit/BoJzDAL8jXYUw1mb9dYK?p=preview

I have an input box and a select box at the top to add subtask names and task schedules to the table.

When adding new data, it should only be added if the task schedule value is not already present. If the selected task schedule already exists, then the new row should not be added, and the subtask name should be stored inside the string[].

For example, if a user tries to add a subtask name while selecting "Schedule 1" or "Schedule 3", the new row should not be added because those schedules are already taken. However, if the user selects "Schedule 2", then a new row can be added.

I need assistance in storing the subtask names into the existing string[] when new data is added with an existing schedule. If there is no existing data available with the selection, then a new row can be added.

Answer №1

Instead of using an object, you can utilize the id as the value. To determine if the id already exists in the list of activities, you can employ the some method. If the id is found, then push the data to subTaskNames; otherwise, add the entire activity.

Below is a functional example.

angular.module('app', [])
  .controller('ExampleCtrl', ['$scope', ($scope) => {
    $scope.items = [{
        id: 1,
        name: 'schedule1'
      },
      {
        id: 2,
        name: 'schedule2'
      },
      {
        id: 3,
        name: 'schedule3'
      }
    ];

    $scope.activities = [{
        subTaskNames: ['subtask1'],
        taskShedule: 1
      },
      {
        subTaskNames: ['subtask2'],
        taskShedule: 3
      }
    ];

    $scope.addTask = function() {
      if ($scope.activities.some(a => a.taskShedule === $scope.selectedItem)) {
        $scope.activities = $scope.activities.map(a => a.taskShedule === $scope.selectedItem ? {
          subTaskNames: [...a.subTaskNames, $scope.subtaskname],
          taskShedule: $scope.selectedItem
        } : a);
      } else {
        $scope.activities = [...$scope.activities, {
          subTaskNames: [$scope.subtaskname],
          taskShedule: $scope.selectedItem
        }];
      }
    };

    $scope.removeTask = function(index) {
      $scope.activities.splice(index, 1);
    };
  } ]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="app" ng-controller="ExampleCtrl">
  <h1>Task List</h1>

  <fieldset>
    <legend>Create New Task</legend>
    <input type="text" ng-model="subtaskname" placeholder="Subtask Name"><br />
    <select id="s1" ng-model="selectedItem" ng-options="item.id as item.name for item in items"></select>
    <button type="button" ng-click="addTask()">Add Task</button>
  </fieldset>

  <table border="1" cellpadding="10">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Title</th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="data in activities">
        <td>{{data.subTaskNames}}</td>
        <td>
          <select ng-model="data.taskShedule" ng-options="item.id as item.name for item in items">
            {{item}}
          </select>
        </td>
        <td>
          <button type="button" ng-click="removeTask($index)">Remove Task</button>
        </td>
      </tr>
    </tbody>
  </table>

</body>

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

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Issue with Navbar toggle menu not closing properly. I have attempted the solutions provided here and others in an effort to fix this bug. However, none of them seem to work for me. Here is a snippet of my code: <nav class="navbar navbar-expand-lg ...

Define a new type in Typescript that is equal to another type, but with the added flexibility of having optional

I have 2 categories: category Main = { x: boolean; y: number; z: string } category MainOptions = { x?: boolean; y?: number; z?: string; } In this scenario, MainOptions is designed to include some, none, or all of the attributes that belong to ...

What can you do to ensure Vue detects input element changes after using preventDefault?

In this example, I am trying to prevent a newline from being created in a textarea when the Enter key is pressed. To achieve this, I use the preventDefault method in my event handler and update the value inside the textarea. However, I encounter an issue w ...

Adjust the field's color depending on the outcome displayed within

I'm trying to implement a feature where the field value changes to green when "OK" is selected and red when "NOK" is chosen. I have written the following JavaScript code but it's not working as expected - the colors change before clicking submit, ...

Transmit XML data from controller to JavaScript

My goal on the UI is to display a formatted XML string when clicking on a link within a table of objects. I have tried passing the XML string to the View via a ViewModel and then setting it as a data attribute for the link. When clicked, JavaScript reads t ...

What could be causing the issue with Google Chart in my ASP MVC app?

My controller has a method that returns Json data. [HttpPost] public JsonResult CompanyChart() { var data = db.adusers; var selectUsers = from s in data where (s.Company != null) select s; int f ...

Managing Actions in React-Redux: Understanding the Dispatch Function

While I am delving into the world of React, I stumbled upon an example that looks like this: //index.js const store = createStore(reducer) render( <Provider store={store}> <AddTodo /> </Provider>, document.getElementById(' ...

Steps to display text in a div upon clicking on an image

I am trying to create an image with two DIVs separated by a black line. The left DIV will contain 4 images, and I want the following functionality: When a user clicks on any of the buttons in the left DIV, a corresponding text should be revealed in the ri ...

Utilizing an NPM Mirror: A Comprehensive Guide

Oh no, the npm registry is experiencing issues once more, causing havoc with executing npm install. Query: What is the alternative method for using npm to fetch packages from npm mirrors? Can you suggest any reliable npm mirrors? ...

Ways to verify if a variable holds a JSON object or a string

Is it possible to determine whether the data in a variable is a string or a JSON object? var json_string = '{ "key": 1, "key2": "2" }'; var json_string = { "key": 1, "key2": "2" }; var json_string = "{ 'key': 1, 'key2', 2 } ...

Can cucumber steps be executed conditionally within a single scenario?

I would like to streamline my testing process by using one feature file for both desktop and mobile tests. I am looking to run two separate tests, with one tagged as @mobile and the other as @desktop. By doing this, I can avoid creating a duplicate feature ...

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

To ensure W3C validation, I must remove the target attribute from all anchors where the target value is null. Here is the code snippet inside the body: <div> <a href="#" target="">home empty</a> <a href="#" target="blank">home&l ...

AngularJS: The power of dynamic HTTP POST parameter names

Utilizing an API to update profile information allows for the addition of a nickname, email, phone number, or password in the request parameters, which will then be updated in the database. When updating a specific field, such as Nickname: { "nickname": ...

The issue I am facing is that Angular's translation feature is not functioning as expected. Specifically, the view does

Here is the Plunker link attached for reference. The following snippet includes my HTML code: <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>AngularJS Plunker</title> <script> ...

Repeated module imports

Currently, as part of my app development process, I am utilizing Parcel along with @material-ui/styles. One crucial aspect to note is that my app has a dependency on the @material-ui/styles package. Additionally, I have incorporated my own npm package, sto ...

Toggle the visibility of buttons within the "ion-nav-bar" based on the current view

When it comes to hiding and showing icons based on the view, I seem to have hit a roadblock. It appears that the ion-nav-bar is only accessible from the tabsCtrl. Below is the markup for the view: <ion-nav-bar class="bar-stable"> <ion-nav-back ...

Exploring the srcObject feature in React NativeDiscovering the ins and

I am currently working with react native web technology. React-Native-Web: https://github.com/necolas/react-native-web One of the requirements is to incorporate a Video tag. I have developed a video component using CreateElement. Here is the video compo ...

Error code 12030: AJAX request status

When making an ajax XMLHttpRequest using the POST method, I am encountering a readyState of 4 with a status of 12030. It is known that 12030 is a Microsoft-specific state code indicating that the connection was not sustained. However, I have been unable to ...

Utilize SVG background with transparent text for a clear view of surrounding content

I'm looking for a way to overlay a video with a semi-transparent black div that includes text and a button, while still allowing users to see the video playing behind it. I previously achieved this using a PNG image but now need to apply the effect to ...

DotJem AngularJS routing: Unable to find the 'pagename' within the '$root' directory

Every time I launch the website, everything seems fine at first, but then all the links turn out to be broken. Although they are clickable and lead to the correct URL, the content related to that specific page doesn't appear. Interestingly, if I copy ...