Angular JS默认添加新行为可编辑模式
Angular JS add new row be in editable mode as default
我正在使用ng-repeat指令创建一个网格,但是通过单击新行,新行不是默认的可编辑模式,用户必须单击编辑按钮。如何在可编辑模式下创建新行?
<!-- <tr ng-repeat="primaryskill in primarySkills"> -->
<tr ng-repeat="skill in skills">
<td>
<!-- <span editable-text="primaryskill.name" e-name="name" e-form="rowform"> -->
<span editable-text="skill.primarySkill.name" e-name="name" e-form="rowform">
{{ skill.primarySkill.name || 'empty' }}
</span>
</td>
<td >
<tags-input ng-model="skill.primarySkill.skillGroups" display-property="name" replace-spaces-with-dashes="false" on-tag-added="saveSkillGroup($tag,skill.primarySkill,$index)" on-tag-removed="removeSkillGroup(skill.primarySkill)">
<auto-complete source="loadskillGroups($query)" display-property="name" load-on-focus="true" min-length="0" load-on-empty="true"></auto-complete>
</tags-input>
<!-- <p>Model: {{skill.primarySkill.skillGroups}}</p> -->
</td>
<td>
<tags-input ng-model="skill.secondarySkills" display-property="name" on-tag-added="saveSecondarySkill($tag,$tag.id, skill.primarySkill)" on-tag-removed="removeSecondarySkill($tag,skill.secondary)">
<!-- <auto-complete source="loadsecondarySkills($query,skill.primarySkill.id)" display-property="name" min-length="0" load-on-empty="true"></auto-complete> -->
</tags-input>
<!-- <p>Model: {{skill.secondarySkills}}</p> -->
</td>
<td style="white-space: nowrap;text-align: center;" class="col-xs-12 col-xs-offset-3">
<!-- form -->
<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill.primarySkill, $index)">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary" >
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div >
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removePrimarySkill(skill.primarySkill)">del</button>
</div>
</div>
</td>
</tr>
</table>
<div id="myprimarySkills">
<button class="btn btn-default" ng-click="addSkill(primaryskill)">Add Skill</button>
</div>
</div>
我相信你使用的是可编辑表单。试着在form元素上添加show ="true"
示例(试着用这个替换你的表单行):
<form editable-form name="rowform" shown="true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
也可以通过ng-init:
<form editable-form name="rowform" ng-init="rowform.$show()" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
更新:<form editable-form name="rowform" shown="skill.editable === true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
$scope.addSkill = function (someParam) {
$scope.skills.push({
editable: true
//some other staff you're implementing
});
}
相关文章:
- Rad网格编辑模式通过选中复选框时的java脚本启用禁用所需的字段验证器
- jqGrid - 是否有任何“网格编辑模式”
- 有没有更好的方法可以在ng网格中切换编辑模式
- 在客户端的编辑模式下,在同一单元格网格视图中选中复选框时禁用文本框
- jquery.filer编辑模式动态文件添加
- 设置一个下拉填充到它's的值和文本在AngularJS和asp.net webApi中的编辑模式
- 脚本仅在编辑模式 - 共享点页面上执行
- 在剑道网格中有选择地将编辑行中的单元格切换为编辑模式
- 详细信息视图 ASP.Net 取消客户端的默认编辑模式
- 如何在 MVC-4 中的编辑模式弹出窗口中获取复选框
- 尝试检测网格视图的哪一行处于编辑模式,然后在选中复选框字段时调整文本框
- Kendoui ListView在编辑模式下删除行
- 当不处于编辑模式时,下拉列表中的Kendo单元格值显示为未定义
- 从javascript访问Telerik RadGrid编辑模式
- ui网格中的EditableCellTemplate处于编辑模式[ng网格3.X]
- jqgrid密码字段不仅在编辑模式下
- 当单元格进入编辑模式时,禁止在除一个单元格(选定行中)之外的任何位置单击
- 如何在Xpage中将Editbox的模式从读取模式更改为编辑模式
- 网格视图使用ESC和JavaScript退出编辑模式
- Javascript:检查RadGrid项是否处于编辑模式