Using `ngModel` within `ngOptions` inside `ngRepeat`

<p><b>Customer Name</b></p>
<div ng-repeat="customer in customerList">
  <b>{{customer.name}}</b>
  <select value="Please choose a bot from the list" ng-model='???' ng-options="b as b.name for b in listOfBots" |>
  </select>
</div>
<button ng-click="(getBotSelection())">Choose Bots</button>

I have not been able to locate any resources related to this specific setup. The customerList consists of data imported from an Excel spreadsheet prompting me to make updates for customers. I require a bot to be executed for each customer, hence I am setting ng-options to bot.name in the listOfBots array.

The challenge with my search results is that they tend to focus on iterating through only one collection at a time. I am struggling to implement this particular scenario and would appreciate some guidance.

This is how the list of bots appears:

for (var i = 0; i < listOfBotsArr.length; i++) {
      listOfBotsObj.push({
        name: listOfBotsArr[i]
      });
      $scope.$apply();
  }

Answer №1

<div ng-show="showBotList">
  <p>It is required to manually select which bots to run</p>
  <p><b>Client Name</b></p>
  <div ng-repeat="client in clientList">


    <b>{{client.name}}</b>
    <select value="Please choose bot from list" ng-model="bot" ng-options="b as b.name for b in listOfBots" ng-change="getSelectedBot(this.bot.name)" |>
    </select>
  </div>
  <button ng-click="">Choose Bots</button>
</div>

My approach involved passing "this" with ng-change and examining it, revealing the object I was returning, with a property bot.name that proved useful.

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

Obtaining an image from a URL, saving it, and then animating it? That definitely

Looking to create a dynamic animation with images that update every 15 minutes from the following URL: How should I go about storing and looping through the most recent 24 images for the animation? Is using a MySQL database the best option or are there o ...

Having trouble with React Testing Library throwing an error every time I try to use fireEvent on an input text?

When attempting to utilize the "fireEvent" method from React Testing Library, I encountered an error as shown below: MainSection.test.js: test('Verifying SearchBar functionality', async () => { render(<SearchBar />); const text ...

Making a floating action button in Ionic

I am currently working on creating an action floating button using the Ionic framework. While I have successfully created a basic button, I am now looking to add some stylish effects and make additional buttons appear upon interaction. I understand that th ...

"Step-by-step guide on uploading multiple images to a Node server and storing them in

Hey everyone! I'm currently working on a project using React and MongoDB. Users are required to register and login before accessing the app. Once logged in, they can input their name, number, and images through a form. However, I've encountered a ...

Working with Firestore database in React Js may result in an infinite loop

I have connected my React JS app to Cloud Firestore and I am facing an issue with displaying the objects in my JavaScript file. Even though I only have one object in Firestore, it seems to be reading in a loop and I can't seem to identify the cause. ...

What is the best way to renew an access token with axios?

I have been struggling to understand the concept of refreshing tokens after reading numerous articles on the topic. They all seem too convoluted for me to grasp. Could someone please simplify it for me? Here is an overview of what I am trying to achieve: ...

Exploring elements in firebase

I am currently in the process of expanding an application to utilize firebase as the backend in order to learn more about firebase/angularjs. My setup resembles this . Within my code, I have linked firebaseio.com/projects to $scope.projects. How can I ...

Guide to placing an image in a designated position

I am looking to achieve the following scenario: Whenever a user uploads an image, it should appear in one of the smaller boxes on the right. Subsequent image uploads by clicking on the big box should populate the other small boxes on the right. Please refe ...

Observables and the categorization of response data

Understanding Observables can be a bit tricky for me at times, leading to some confusion. Let's say we are subscribing to getData in order to retrieve JSON data asynchronously: this.getData(id) .subscribe(res => { console.log(data.ite ...

Replace the facebook plugin using JQuery libraries

Does anyone know how to remove the like button on top of the 'Like box' Facebook plugin using JQuery? I have imported the like box from Facebook and I want to eliminate this like button, but Facebook does not allow me to do so. Therefore, I am t ...

Creating a dynamic state management system for multiple Collapse components can be achieved by utilizing

I am trying to create a Collapse menu from array data, Currently, when I click on any menu all sub menus expand I believe my issue lies in not being able to set a unique "open" state for each Main menu I want to avoid assigning a "state" to accommodate ...

What is the key element missing from my code while attempting to integrate Threejs into React?

I recently undertook the task of converting a project from vanilla Three.js to React. For reference, here is the original project: https://codepen.io/Mamboleoo/pen/rNmRqeK And here is the code I have been working on: You can view the code in CodeSandbox ...

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

Modifying information in a single array in Vue JS has a ripple effect on

I'm really struggling to understand what the ... want with this Vue component! Can someone please help me out? Here is my code: var groupadding = new Vue({ el: '#groupAdd', data:{ currentFullData: [], localData: [] }, method ...

Retrieve the route parameters and exhibit the default option in a dropdown menu using Angular 2/4/5, along with translations implemented through ngx-translate

Is there a way to extract route parameters from a URL and then display them in a drop-down menu? I've attempted some solutions using ActivatedRoute, but they are not returning the first value after the base reference. For instance, If the URL is: l ...

Quantities with decimal points and units can be either negative or positive

I need a specialized input field that only accepts negative or positive values with decimals, followed by predefined units stored in an array. Examples of accepted values include: var inputValue = "150px"; <---- This could be anything (from the input) ...

Notify when a certain element's ID is visible on the screen using the jQuery appear method

Having trouble getting this plugin to cooperate: https://github.com/morr/jquery.appear I attempted to reference the plugin from a CDN using Ajax: http://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js Why isn't it working as expe ...

Unique column arrangement specifically designed for the initial row within the loop

My webpage features a layout that showcases 4 images on each row. However, I am looking to create a special first row with a unique column configuration compared to the rest of the rows. Here is an example of what I have in mind: This particular row will ...

Submit data in the manner of a curl request

Instead of using a curl command to push a file to a web server, I am attempting to create a simple webpage where I can select the file and submit it. Here is the HTML and JavaScript code I have written for this purpose: <html> <body> <i ...

Unable to modify a record using the 'findById' method and save() function while utilizing promises

I am in the process of developing a cinema application using Node.js and MongoDB with Mongoose. One specific requirement I have is to update the 'Show' model when a user places an order. The task involves adding the latest seats that were ordere ...