0

I created two forms. The first is so that I can submit a number of typed items to an array for display in a text box in the second form. The text box in the second form should display the items in the array as new items are added from the first form. I want to be able to delete the items in the text box and have it delete the items from the array before save. I also want to select a single item from the array as a primary name. I have an input box in the second form set up for primary name selection.

The code below has a couple of problems: 1) The text box does not add new items as they are either typed or submitted from the first form. 2) If I put information in my datastore it will show up in my text box since I set it up as an editable form but when I delete the information from the text box it does not delete it from my array (at least from what I can tell). 3) Selecting a primary name works somewhat but it is buggy and seems to only work smoothly every second time I try to change the value therein.

I was under the impression that ng-bind (or maybe ng-list?) would coordinate the data in the DOM with changes in the model. Where am I going wrong? I looked at several links on this matter that were somewhat helpful but I'm unable to fully apply them to the task at hand:

https://docs.angularjs.org/api/ng/directive/ngBind
https://docs.angularjs.org/api/ng/directive/ngList
http://codepen.io/NicholasMurray/pen/ogmLyy
http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular

My HTML:

<form class="first-signup-inner-form" ng-submit="submit()">
<input list="names" ng-model="aliases" type="text" placeholder="Names">
<input type="submit" value="Submit">
</form>

<form class="first-signup-inner-form" editable-form name="editableForm">
<textarea class="w-input alias-text-field" id="Aliases" placeholder="All Names" name="Aliases" ng-bind="list"></textarea>
<input class="w-input business-name-text-field" list="aliases" ng-model="user.Name" id="Business-Name" type="text" placeholder="Official Name" name="Business-Name" required="required">
<datalist id="aliases"><option data-ng-repeat="alias in list" value="{{alias}}"></datalist>
</form>

JS:

$scope.list = [];
$scope.aliases = "";
$scope.submit = function(){
            if ($scope.aliases){
              $scope.list.push(this.aliases);
              $scope.aliases = "";
            }
          };
rashadb
  • 2,515
  • 4
  • 32
  • 57
  • Thanks. That's not actually in my real code - that mistake was introduced when I chopped it. I will fix it now. – rashadb Aug 21 '15 at 13:43
  • Maybe also show more info such as your entire HTML structure and Controller etc. – Rob Schmuecker Aug 21 '15 at 13:45
  • In your submit function, you have used `$scope.aliases` everywhere except the statement where you actually insert it into the array where you reference it with `this` - why? – callmekatootie Aug 21 '15 at 13:46
  • @callmekatootie I don't have a good answer for you other than that was what I was able to take from several examples and get to work. What do you suggest? – rashadb Aug 21 '15 at 13:50
  • Be consistent. Go with `$scope` instead of `this`. Also - you have used many directives that you have not talked about - maybe they interfere in some way. Best that you create a plunkr or a fiddle and show the issue that you face – callmekatootie Aug 21 '15 at 14:00
  • @all https://jsfiddle.net/#&togetherjs=lP0Hd21Kpn Here's the js fiddle illustrating what I think it supposed to do but the damn thing won't post. – rashadb Aug 21 '15 at 14:02
  • I just reset the thing. I've not used JS fiddle successfully before . . . – rashadb Aug 21 '15 at 14:05
  • It looks like I can't actually post things to a form in JSfiddle so I'm a little confused as to how this could be helpful. – rashadb Aug 21 '15 at 14:06
  • You can use http://goo.gl/tvk1En to create your code fiddle. I have put some of your code there – Kapil Garg Aug 21 '15 at 14:09
  • @KapilGarg Thanks I'm looking at it now. – rashadb Aug 21 '15 at 14:12
  • Alright you can generate code there with directives and share link here so we can view and help you solve your issue. – Kapil Garg Aug 21 '15 at 14:13
  • The code you put in works like the code I have; or rather it doesn't work like the code I have. I want to be able to see an evolving list of everything in the All Names text box and I want to be able to delete a name in the All Names text box and remove it from the list. – rashadb Aug 21 '15 at 14:16
  • From what I can tell there are quite a few mixed up things in your code. E.g.: ng-bind binds to a text value of an element, whilst you bound it to an array object, syntactically the datalist seems to be incorrect and so on. When I get home and this question isn't solved, I'll attempt to rerewrite it with your requirements in mind. – skubski Aug 21 '15 at 14:29
  • @skubski, that would be much appreciated. I'm still struggling with it but I'm running out of ideas . . . – rashadb Aug 21 '15 at 14:37
  • @rashadb what about this http://goo.gl/BxR5oh you enter a in textbox and click submit it removes a from array and then you write b in textobox and click submit it will remove b from array textarea – Kapil Garg Aug 21 '15 at 14:42
  • @KapilGarg - thanks man, I'm working with it now. That's a good suggestions for deleting items and it might work. – rashadb Aug 21 '15 at 14:51
  • @rashadb please mark my answer with right...thanks – Kapil Garg Aug 21 '15 at 14:53

1 Answers1

0

So this is answer of your question See here

Kapil Garg
  • 3,100
  • 5
  • 19
  • 19
  • the answer is backwards - I want to add to the box when I click submit and I'd like to selectivly delete the items added to the box if a mistake is made. I have no control over which items are deleted with your solution. – rashadb Aug 21 '15 at 14:55
  • @rashadb this was just the hint. you can understand rest of thing very easily. so i think hint is more useful for you. – Kapil Garg Aug 21 '15 at 14:58
  • Thanks for the hint but I can't get it. I can't mark your answer right because someone else may still chime in with more help on this. – rashadb Aug 21 '15 at 15:14
  • Thanks Kapil. I figured out what you meant. I hope I can get the rest from here! – rashadb Aug 21 '15 at 15:18