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

Question

我创建了这个示例 ( jsbin )，其中显示了乐队成员和他演奏的乐器。

这是它的样子:

起初，没有人玩任何东西，所以 instumentId 为空:

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:

目前模板在每一行(隐藏)中，我不想要那个!我希望它是临时注入(inject)的(这样用户就可以选择一种乐器)，然后将其从 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 绑定(bind)到 ng-model='instrumentDdl' 。此外，save 函数执行此操作:

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

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

---

附言，我的目标:动态临时注入(inject)，保存时看起来像(约翰的唯一示例):

Answer 1

对于问题 1，请使用 ng-if='user.isEdited'

对于问题 2，尝试使用 select 和 ng-option

更新:我对问题 2 的看法不对。您需要提供一些指令代码以及您在哪里调用 s.save (html 元素)以了解它为什么不起作用。

更新 2:查看您的 jsbin，这是一个范围问题。

<li ng-repeat='user in users'>正在为每个用户创建一个新范围。 instrumentDdl当您显示下拉列表时，将被添加到为每个用户创建的范围中。它没有被添加到父 Controller 范围。你能做的就是写

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

并相应地更改保存方法。