Javascript AngularJs-临时注射？

我创建了这个示例（），它显示了一个乐队成员和他演奏的乐器

这就是它的样子：

起初，没有人玩任何东西，因此

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:

目前模板是在每一行（隐藏），我不希望这样！我希望它是临时注入的（这样用户就可以选择一个工具），然后从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>

但是我在

控制台.log（s.instrumentDdl）

（

s===$scope

）上得到了

未定义的
。为什么呢


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

对于问题1，如果class='user.isEdited'，请使用
ng

对于问题2，请尝试选择和
ng选项

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

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

正在为每个用户创建一个新的作用域<显示下拉列表时，代码>仪器DDL
将添加到为每个用户创建的范围中。未将其添加到父控制器范围。你能做的就是写作

保存

并相应地更改保存方法。
UPDATE
我删除了
ngInit
，因为它不是您需要的。
这是一个正在工作的jsbin：

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

控制程序：-在保存、编辑和取消事件时设置变量

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>

编辑
工具：
拯救
取消
对于这个非常详细的问题，我应该得到如此糟糕的答案吗？（另外，
ng选项
是不相关的。我的示例也可以使用。您也可以使用
ng repeat
。另外，我不知道ng与动态临时插入有什么关系。另外，如果您愿意的话，我会非常感谢。@RoyiNamir，我已经修复了部分答案。console.log（s.instrumentDdl）我认为这有点异味应该是instrumentDdl所有的一切都是建模的，只要在条件为真时在DOM中注入html。@Whisher否。它附加了tpo$scope对象。并且$scope是my code.tnx中的
s
。为什么模板在每一行都是打开的？为什么？
ng init
启动
使用r、 ISedit=true
我的第一个问题是谈论它。我不想在dom中复制此模板。我希望它只显示在已编辑的行中。（我甚至不想隐藏）模板应仅在相关行插入，并在保存/取消后处理。此外，为什么要放入模板：
ng model='user.instrumentSelected'
？这将绑定到
$scope.user.instrumentSelected
…对吗？是的，
ngRepeat
为每个项目创建一个新的子范围，以便将其范围设置到右侧透射电镜
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>