Javascript 如何使用AngularJS在单击时将文本元素更改为输入字段?
我想知道如何在AngularJS中实现这一点 有这个关键字列表和旁边的编辑按钮Javascript 如何使用AngularJS在单击时将文本元素更改为输入字段?,javascript,angularjs,Javascript,Angularjs,我想知道如何在AngularJS中实现这一点 有这个关键字列表和旁边的编辑按钮 <tr ng-repeat="keyword in keywords"> <td> <strong id="keyword.name">{{ keyword.name }}</strong> </td> <td> <button ng-c
<tr ng-repeat="keyword in keywords">
<td>
<strong id="keyword.name">{{ keyword.name }}</strong>
</td>
<td>
<button ng-click="editKeyword(keyword.name)">Edit</button>
<button ng-click="deleteKeyword(keyword.name)">Delete</button>
</td>
</tr>
{{keyword.name}
编辑
删除
现在在我的控制器里有这样的东西
$scope.editKeyword = function(name){
console.log(name);
//something done to change the <strong> element into a text input
};
$scope.editKeyword=函数(名称){
console.log(名称);
//将元素更改为文本输入的操作
};
如何通过控制器将“strong”元素替换为文本输入字段。这可以用angularJS完成吗
谢谢你的帮助 最简单的方法是直接在模板中使用
ng if
<td>
<strong id="keyword.name" ng-if="!editMode">{{ keyword.name }}</strong>
<span ng-if="editMode">
<input ng-model="keyword.name">
<button ng-click="save(keyword); editMode = false">Save</button>
<span>
</td>
<td>
<button ng-click="editKeyword(keyword); editMode = true">Edit</button>
<button ng-click="deleteKeyword(keyword)">Delete</button>
</td>
{{{keyword.name}}
拯救
编辑
删除
正如charlie提到的,ng如果
就能完成这项工作。
还有“ng开关”,它正是针对这种情况而制造的
<tr ng-repeat="keyword in keywords">
<td ng-switch="mode[$index]">
<input ng-switch-when="edit" id="edit" ng-model="keyword.name">
<strong ng-switch-default id="keyword.name">{{ keyword.name }}</strong>
</td>
<td>
<button ng-click="editKeyword(keyword.name, $index)">Edit</button>
<button ng-click="deleteKeyword(keyword.name)">Delete</button>
</td>
</tr>
{{keyword.name}
编辑
删除
控制器看起来像:
$scope.editKeyword = function(name, index){
$scope.mode[index] = "edit";
console.log(name);
//something done to change the <strong> element into a text input
};
$scope.editKeyword=函数(名称、索引){
$scope.mode[索引]=“编辑”;
console.log(名称);
//将元素更改为文本输入的操作
};
完成编辑后,您可以将$scope.mode[index]更改为任何其他内容。这是一个很好的解决方法。我想Angular有办法自动完成。但这是完美的。谢谢。有些模块具有更多的功能/风格等,但我只向您展示了最简单的方法。是的,这就足够了。感谢您的帮助。请注意,您可以向输入元素添加ng blur=“mode[$index]='view'
。这是一个更简单的选项,可以返回到初始的“查看”状态,而不是接受答案中的“保存”按钮。