javascript - AngularJs-临时注入(inject)？

我创建了此样本（jsbin），其中显示了乐队成员和他使用的乐器。

它是这样的：



首先，没有人玩任何游戏，因此instumentId为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 },
    ];

当我点击“编辑”时-我有一个模板在：



用户应该选择：



一切都好。

但是我有两个问题：

问题1：

目前，模板在每行中（隐藏），我不希望这样！我希望它被暂时注入（以便用户可以选择一种仪器），然后将其从dom中移除。

我该怎么做 ？

问题2 ：

模板是：

 <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>

所以我将select绑定到ng-model='instrumentDdl'。另外，save函数可以执行以下操作：

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

但是我在undefined（console.log(s.instrumentDdl)）处得到s===$scope。这是为什么 ？



PS，我的目标是：动态临时注入，并保存后-看起来像（约翰的唯一示例）：

最佳答案

更新

我删除了ngInit，因为它不是您所需要的。
这是一个有效的jsbin：http://jsbin.com/EPabuQAm/11/edit

在模板内部使用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>

用户列表，使用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：-在保存，编辑和取消事件时设置变量

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;
};

您还可以获得没有任何范围函数的方法：

 <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>

关于javascript - AngularJs-临时注入(inject)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21526195/