我正在使用Angular Xeditable api。我需要根据下拉列表的值更改文本字段的值。但它不起作用。你能告诉我为什么吗?感谢。
HTML
<td>
<span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses" e-ng-change="setName($data,user)">
{{ showStatus(user) }}
</span>
</td>
JS
$scope.setName = function (id, user) {
var selected = [];
if (id) {
selected = $filter('filter')($scope.statuses, { value: id });
}
if (selected.length) {
user.name = selected[0].text;
}
};
生成的HTML :您可以看到已按预期更改了文件名(status3)。但它没有正确更新文本框。换句话说,它没有显示在文本框中。为什么?
<td>
<!-- editable username (text with validation) -->
<span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)" class="ng-scope ng-binding editable editable-hide">
status3
</span><span class="editable-wrap editable-text ng-scope"><div class="editable-controls form-group" ng-class="{'has-error': $error}"><input type="text" class="editable-input form-control ng-pristine ng-valid" ng-model="$data"><div class="editable-error help-block ng-binding" ng-show="$error" ng-bind="$error" style="display: none;"></div></div></span>
</td>
更新:
我试过这样。然后它改变了所有的行值。那我怎样才能只检测到改变的行?
$scope.setName = function (id, user,form) {
var selected = [];
if (id) {
selected = $filter('filter')($scope.statuses, { value: id });
}
if (selected.length) {
for (var i = 0; i < form.$editables.length; i++) {
if (form.$editables[i].name === 'user.name') {
form.$editables[i].scope.$data ="sampath"
}
}
}
};
以下是 JsFiddle
答案 0 :(得分:1)
我尝试使用您的旧源代码,它对我有用:
if (selected.length) {
user.name = selected[0].text;
}
可能是我想念你的问题。
答案 1 :(得分:1)
如果我理解正确,你只想根据状态变化更新文本框上的文本(绑定到用户名),对吧?
如果是这样,那么你的UPDATED代码太复杂了。只需直接在传递给setName函数的用户对象上更新属性(就像在第一个示例中一样)。它已经绑定到文本框,因此您不必一直走动并直接更新文本框。这是使用角度的全部要点。您可以更新示波器上的模型,其余部分会自动发生。
$scope.setName = function (id, user) {
if (!id || !user) {
// Do something to handle this...
return;
}
var selected = $filter('filter')($scope.statuses, { value: id });
selected = selected.length ? selected[0] : null;
user.name = 'sampath (' + selected.text + ')';
};
这是一个有用的小提琴: http://jsfiddle.net/NfPcH/14765/