Patrick Patrick - 3 months ago 50
jQuery Question

Angularjs Modal + autocomplete input (Plunker attached)

I have the following plunker attached herewith


As per the plunker, i have 3 issues which i am not able to fix.

1) When user clicks on 'add row', 3 input fields show up. 2,3 and 1. i want the sequence to be 1,2 and then 3. 1 is the autocomplete input box which should be at the top. If i bring 1 to top, i dont see 2 and 3 then.

2) Ok and Close buttons dont close. Am i doing anything wrong in the function ? Pressing 'ok' should let me retrieve the selected value at input 1. Pressing 'cancel' should close the modal

3) If you see $scope.fetchList, it has a JSON value. I want the $scope.fetchList to be using an array instead. What changes needs to be done in order to get the following. Just an example of autocomplete list items below.

$scope.fetchList = ["ActionScript","AppleScript","Asp","BASIC","C"];


I forked your plunk here

Here's how I addressed your issues:

Issue 1

I just wrapped your elements in div's

      <br> Select name:&nbsp;&nbsp;
      <autocomplete placeholder="Enter sedol" style="width:29%" selection="selection" source="fetchList" />
      <br> Given Data1:&nbsp;&nbsp;
      <input type="text" readonly>
      <br> Given Data2:&nbsp;&nbsp;
      <input type="text" readonly>

Issue 2

You hade the save an cancel functions declared in the parent controller rather than the controller for the modal, so I moved it.

Issue 3

I don't understand the issue. fetchList() already returns an array albeit an array of objects rather than an array of strings. Changing it to an array of string breaks all sorts of code in your directive.