2016-11-15 184 views
1

我的HTML代码,车把选择框填充

我希望每个用户角色下一个被选择为每个用户名的选择框,

里面的角色的每一个循环我不能能够访问的作用父用户节点, 是有可能的用户节点的角色ID的角色节点角色ID,当其相等比较,则该选项被选中

<table> 
<tr> 
    <p>peter is employee</p> 
    <p>john is admin</p> 
    <p>michel is manager</p> 
</tr> 
{{#user}} 
<tr> 
    <td> 
     <input type="text" value="{{name}}"> 
    </td> 

    <td> 
     <select> 
      {{#each ../roles}} 
      <option value="{{roleid}}">{{value}}</option> 
      {{/each}} 
     </select> 
    </td> 
</tr> 
{{/user}} 

这是5月的Json

var data = { 
"user": [ 
    { "name": "peter", "role": 1 }, 
    { "name": "john", "role": 2 }, 
    { "name": "michel", "role": 3 } 
], 
"roles": [ 
    { "roleid": 1, "value":"manager"}, 
    { "roleid": 2, "value":"employee"}, 
    { "roleid": 3, "value":"admin"} 
] 
}; 

小提琴网址https://jsfiddle.net/Manu_S/egbwbfav/2/

感谢

回答

1

您可以访问父节点值和你的选择框进行比较。

请遵循的jsfiddle工作是

https://jsfiddle.net/gsubbarao/nz0bc0pq/

<script id="t" type="text/x-handlebars"> 
<table> 
<tr> 
    <p>peter is employee</p> 

    <p>john is admin</p> 
    <p>michel is manager</p> 
</tr> 
<tr> 
<td>&nbsp;</td><td></td><td></td> 
</tr> 
{{#user}} 
<tr> 
    <td> 
     <input type="text" value="{{name}}"> 
    </td> 

    <td> 
     <select> 
      {{#each ../roles}} 
      <option value="{{roleid}}" 
      {{#ifCond ../role roleid}} 
      selected 
      {{/ifCond}} 
      > 
      {{value}} 
      </option> 

      {{/each}} 
     </select> 
    </td> 
</tr> 
{{/user}} 

</script> 

    var data = { 
    "user": [ 
     { "name": "peter", "role": 2 }, 
     { "name": "john", "role": 3 }, 
     { "name": "michel", "role": 1 } 
    ], 
    "roles": [ 
     { "roleid": 1, "value":"manager"}, 
     { "roleid": 2, "value":"employee"}, 
     { "roleid": 3, "value":"admin"} 
    ] 
}; 
Handlebars.registerHelper('ifCond', function(v1, v2, options) { 
    if(v1 === v2) { 
    return options.fn(this); 
    } 
    return options.inverse(this); 
}); 
var t = Handlebars.compile($('#t').html()); 
$('body').append(t(data));  
+0

它的工作..感谢了很多兄弟。 –