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

Ways to resolve issues related to null type checking in TypeScript

I am encountering an issue with a property that can be null in my code. Even though I check for the value not being null and being an array before adding a new value to it, the type checker still considers the value as potentially null. Can anyone shed lig ...

What are the steps to storing numerical inputs as variables using jQuery and then using them to perform calculations in order to update the input numbers

Currently, I am in the process of creating a BMI calculator using HTML and jQuery. <form id="bmiCalculator"> <fieldset> <legend>BMI Calculator:</legend> <p> <label>Height: ...

What is the purpose of `status: :ok` in the `render json:` method in Rails?

What exactly does status: :ok achieve in the context of render json: {round: @round}, status: :ok? While sometimes it seems unnecessary, there are instances where including it is crucial to avoid errors like the following: ActionController::UnknownFormat ...

Learn how to utilize the import functionality in Node.js by importing functions from one .js module to another .js module. This process can be seamlessly integrated

Hey there! I'm currently facing a challenge where I need to import a function from one JavaScript file to another. Both files are on the client side in Node.js, so I can't use the require method. If I try to use the import statement, I would need ...

VueJS - Vuefire - Unexpected Error: document.onSnapshot is not a valid function

I'm currently working on integrating Vuefire into my project. I have been following the instructions provided on the Vuefire website, but I am encountering an error. db.js: import firebase from 'firebase/app' import 'firebase/firestore ...

Moving Configuration Files in NextJS

When working on a typical Next.js project, I often end up with several root-level configuration files: tsconfig.json next.config.js next-seo-config.ts .eslintrc etc... I am looking to tidy up my root directory by moving these files into their own separat ...

Retrieve a specific progress bar by its unique identifier and use AngularJS to dynamically update its value

How can I update the value of a specific progress bar in AngularJS based on its id? I am looking for a solution to this issue. Below are the progress bars that I have: <progressbar value="0" id="seekbar1"></progressbar> <progressbar value= ...

React does not allow for images to be used as background elements

I am currently working on a web page and I have attempted to use both jpg and png images as backgrounds, but they do not seem to display on the page. import './Entrada.css' const Entrada = () => { return( <div style={{ b ...

Implementing changes in the last loop iteration to impact the final result in Vue

Having recently delved into Vue, I'm having trouble figuring out how to solve this issue. Let me begin by showing you the code snippet followed by explaining the problem at hand. Currently, I am utilizing Vue-Good-Table for this project. methods:{ ...

Delete all HTML functionalities

Is there a way to strip HTML functions when using a text area so that the content shows as plain text in a new post (div)? For example, if I type "Hello", I want it to appear as "< b > Hello < b / >", showing the whole code. Here is the code snippe ...

Executing npm scripts in Node.js

Trying to move away from using the likes of Grunt or Gulp in my projects, I've been exploring npm-scripts as a potential replacement. While npm-scripts makes use of `package.json`, I've found that more advanced build processes require command lin ...

Steps to hide a div after it has been displayed once during a user's session

After a successful login, I have a div that displays a success message and then hides after 4 seconds using the following JavaScript code: document.getElementById('success').style.display = 'none'; }, 4000); While this functionality wo ...

The inline $Emit function is not generating the correct random number when using Math.random()

I've been diving into the concept of $emit event in Vue and came across this tutorial: . I tried implementing something similar using Vue2.js, but every time I click the button, it gives me a rounded number instead of a random number like in the guide ...

Prevent side menu from automatically hiding when clicking on the heading

My menu is set up with headings and subheadings. When I click on the headings, it expands to display the corresponding subheadings, but it automatically collapses when clicking on the headings. I want it to stay expanded when clicking on the headings. He ...

Comparing the syntax of JSON to the switch statement in JavaScript

I recently came across a fascinating post on discussing an innovative approach to utilizing switch statements in JavaScript. Below, I've included a code snippet that demonstrates this alternative method. However, I'm puzzled as to why the alter ...

What is the reason that server.js is always excluded from the Webpack build process?

I am currently utilizing Vue.js 3 for the front end of my application, while employing Node/Express for the back-end. My goal is to implement server side rendering, but I have encountered some challenges along the way. As far as I can tell, the client-sid ...

Bower consistently installs the most up-to-date version instead of the version that was explicitly specified

Despite the version specified in the "bower.json" file, bower (v1.8.0) doesn't adhere to it and instead downloads the most recent version of the library available. It seems like it's not taking the version into account at all. Even downgrading to ...

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

Navigating by Typing in the URL Bar in React

Whenever I paste a valid URL and press enter, the useEffect function in the parent component does not get triggered. However, if I reload the page, it works fine. Here is the code snippet: Routing path <Route path="/search" element={<Searc ...

Conceal the year, month, and day within a datetime-local input

I am working with <input type="datetime-local" step="1"/> input fields, and I want users to only be able to edit the hours, minutes, or seconds. This is due to setting the minimum value using let min = new Date().setHours(0,0,0) and the maximum value ...