CODEWITHSUNDEEP
javascriptangularjs
Royi Namir
Royi Namir

Reputation: 148624

AngularJs - temporary injection?

I have created this sample (jsbin) which shows a band member and an instrument he plays with.

This is how it looks :

enter image description here

At first , no one plays at anything , and so the instumentId is null : 

s.users= [
        { id: 1, firstname: 'John', lastname: 'Lennon', instrumentId: null },
        { id: 2, firstname: 'Paul', lastname: 'McCartney', instrumentId: null},
        { id: 3, firstname: 'George', lastname: 'Harrison', instrumentId: null },
        { id: 4, firstname: 'Ringo', lastname: 'Star', instrumentId: null },
    ];

When I click "edit" - I have a template which is in :

enter image description here

And the user should choose :

enter image description here

All ok.

But I have 2 problems :

Question 1 :

Currently the template is in each row ( hidden) and I dont want that ! I want it to be temporary injected ( so user will be able to choose an instrument ) and then remove it from dom.

How can I do it ?

Question 2 :

The template is : 

 <script type=text/ng-template id='instrument.html'>
    <select ng-model='instrumentDdl' >
     <option ng-repeat='ins in instruments'>{{ins.id +' - '+ins.name}}</option>
  </select>
</script>

So I bind the select to ng-model='instrumentDdl' . Also , the save function do this : 

  s.save=function (user){ 
    console.log(s.instrumentDdl) //<----- undefined...why ?
    user.instrumentId=s.instrumentDdl;
   s.userUnderEdit  = null;
  };

But I get undefined at the console.log(s.instrumentDdl) ( s===$scope). why is that ?

PS , My goal : dynamic temporary injection , and when saved - to look like (john's only example):

enter image description here

Upvotes: 2

Views: 111

Answers (2)

Ilan Frumer
Ilan Frumer

Reputation: 32377

UPDATE

I removed the ngInit as it's not what you need. Here is a working jsbin: http://jsbin.com/EPabuQAm/11/edit

Inside the template use ngOptions & ngModel:

<script type=text/ng-template id='instrument.html'>
    <select ng-model='user.instrumentSelected' 
            ng-options="(ins.id + ' - ' + ins.name) for ins in instruments">    
</script>

Users list , use ngIf:

<li ng-repeat='user in users'>
    {{user.firstname +' '+  user.lastname + ' plays at: '+ (user.instrumentDdl.name ||'?')  }}

    <button ng-click='edit(user)'>Edit</button>
    <div  ng-if='user.isEdited'> Tool : 
        <my-tool > </my-tool>
        <button ng-click='save(user)'>Save</button> 
        <button ng-click='cancel(user)'>Cancel</button>           
     </div>
 </li>

Contoller: - set the variable on save, edit & cancel events

scope.edit=function (user){ 
    user.isEdited = true;
};

scope.cancel = function (user)
{
    user.isEdited=false;
};

scope.save=function (user){ 
    user.isEdited=false;
    user.instrumentDdl= user.instrumentSelected;
};

You can also get a way without any scope functions:

 <button ng-click='user.isEdited = true'>Edit</button>
 <div  ng-if='user.isEdited'> Tool : 
    <my-tool > </my-tool>
    <button ng-click='user.isEdited = false; user.instrumentDdl = user.instrumentSelected'>Save</button> 
    <button ng-click='user.isEdited = false'>Cancel</button>           
 </div>

Upvotes: 1

Chandermani
Chandermani

Reputation: 42669

For Question 1 use ng-if='user.isEdited'

For Question 2 try with select and ng-option

Update: My bad on the question 2. You need to provide some of your directive code and where are you calling s.save (html element) to know why is it not working.

Update 2: Looking at your jsbin, this is a scoping issue.

<li ng-repeat='user in users'> is creating a new scope for each user. instrumentDdl is getting added to the scope created for each user when you show the dropdown. It is not getting added to the parent controller scope. You can do is write

<button ng-click='save(user,instrumentDdl)'>Save</button>

and the change the save method accordingly.

Upvotes: 2

Related Questions