AngularJS单击以编辑下拉列表等字段

AngularJS click to edit fields such as dropdown

本文关键字：字段 下拉列表 编辑 单击 AngularJS      更新时间：2023-09-26

我偶然发现了这篇关于如何为表单构建点击编辑功能的文章。 作者指出：

如果你想要输入类型="日期"甚至选择呢？这 是您可以向指令添加一些额外属性名称的地方 范围，如字段类型，然后更改模板中的某些元素 基于该值。或者对于完全定制，您甚至可以转向 关闭替换：true并添加一个编译函数来包装必要的 单击此项可编辑页面中任何现有内容周围的标记。

在浏览代码时，我似乎无法思考如何以使其应用于任何角度组件的方式操作模板，更不用说如何使其应用于下拉列表了。 以下文章中的代码：

    app.directive("clickToEdit", function() {
    var editorTemplate = '<div class="click-to-edit">' +
        '<div ng-hide="view.editorEnabled">' +
            '{{value}} ' +
            '<a ng-click="enableEditor()">Edit</a>' +
        '</div>' +
        '<div ng-show="view.editorEnabled">' +
            '<input ng-model="view.editableValue">' +
            '<a href="#" ng-click="save()">Save</a>' +
            ' or ' +
            '<a ng-click="disableEditor()">cancel</a>.' +
        '</div>' +
    '</div>';
    return {
        restrict: "A",
        replace: true,
        template: editorTemplate,
        scope: {
            value: "=clickToEdit",
        },
        controller: function($scope) {
            $scope.view = {
                editableValue: $scope.value,
                editorEnabled: false
            };
            $scope.enableEditor = function() {
                $scope.view.editorEnabled = true;
                $scope.view.editableValue = $scope.value;
            };
            $scope.disableEditor = function() {
                $scope.view.editorEnabled = false;
            };
            $scope.save = function() {
                $scope.value = $scope.view.editableValue;
                $scope.disableEditor();
            };
        }
    };
});

我的问题是，我们如何扩展上述代码以允许下拉编辑？ 也就是说，能够更改为被选择的值。

您可以考虑的一种方法是使用 template: function(tElement,tAttrs ) .

这将允许您根据属性返回适当的模板。

app.directive("clickToEdit", function() {
      return {
       /* pseudo example*/
        template: function(tElement,tAttrs ){
             switch( tAttrs.type){
                 case 'text':
                    return '<input type="text"/>';
                 break;
             }
        },....

这在$compile文档中进行了概述

相关文章：