gpt4 book ai didi

angularjs - 将数据绑定(bind)输入到 Angular 中的列表元素

转载 作者:行者123 更新时间:2023-12-03 08:22:50 27 4
gpt4 key购买 nike

我希望我的每个列表项都可以通过输入进行编辑。单击列表项即可填写输入,但如何指定要更新的项呢?我的 $watch 正在工作。

感谢任何帮助。

我有一个笨蛋:https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=preview

这是代码:

<body ng-app="myApp">

<div ng-controller="MyController">

<ul ng-repeat="item in collection">
<li ng-click="edit(item.name)">{{item.name}}</li>
</ul>

<input name="myinput" ng-model="myinput" />
</div>

</body>

JS:

var app = angular.module('myApp', [])

.controller('MyController', function($scope, $http) {

$scope.collection = [
{name:'foo'},
{name:'bar'},
{name:'foobar'},
{name:'barfoo'},
];

$scope.edit = function(current_name) {

$scope.myinput = current_name;

console.log(current_name);

}

$scope.$watch('myinput', function(NewValue, OldValue) {
console.log(NewValue);
}, true);

})

最佳答案

更改您的代码来执行此操作

<li ng-click="edit(item)">{{item.name}}</li>

在你的 Controller 中

$scope.edit = function(item) 
{
$scope.selectedItem = item;
}

最后回到你的标记

<input  name="myinput" ng-model="selectedItem.name"  />

它的作用是将当前可编辑的项目切换到您单击的任何内容,然后当您单击它时,您在输入中输入的任何内容都会更新该项目。

关于angularjs - 将数据绑定(bind)输入到 Angular 中的列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37661373/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com