Question

**HTML**

<ul class="ul_nav">
    <li ng-repeat="teams in teamArray" ng-class="{class : classVar==='{{ teams.team_id }}' }">
        <i ng-show="classVar === '{{ teams.team_id }}'" class="fa fa-pencil pen" ng-click="teamEdit(teams)"></i>
        <span ng-click="changeClass(teams.team_id)">{{ teams.team_name }}</span>
        <i ng-click="deleteTeam(teams.team_id)" ng-show="classVar === '{{ teams.team_id }}'" class="fa fa-times" title="Close"></i>
    </li>
    <input ng-keydown="$event.which === 13 && editTeam()" class="team_input" type="text" ng-show="args.team_name" ng-model="args.team_name">
</ul>

**JS**

$scope.myVar = false;
$scope.changeClass = function(value){
    $scope.classVar = value;
};
$scope.teamEdit = function(teams) {
    $scope.args = {
        team_name : teams.team_name,
        team_id : teams.team_id,
    };
};

当点击一个li时，我需要将其更改为输入字段（type =＆＃34; text＆＃34;）。如何使用angularjs执行此操作。 Plunker

Answer 1

看看这个答案，这是一个替换标签的指令

replace tag on ng-click

fiddle for replacement

app.directive('parseTags', function ($compile) {
var pattern = /(^|\s)#([^\s]+)/g;
return {
    restrict: 'A',
    require: 'ngModel',
    replace: true,
    scope: {
        ngModel: '=ngModel'
    },
    link: function compile(scope, element, attrs, controller) {
        scope.$watch('ngModel', function (value) {
            angular.forEach(value.match(pattern), function (tag) {
                var nohash = tag.replace(/#/g, '');
                console.log(nohash);
                value = value.replace(tag, "<a ng-click='onClick(\"" + nohash + "\")'>" + tag + "</a>");
            });

            var content = angular.element('<span></span>').html(value).contents();
            var compiled = $compile(content);
            element.html('');
            element.append(content);
            scope.onClick = function (tag) {
                alert(tag);
            };

            compiled(scope)
        });
    }
};
});

其他解决方案是使用禁用的输入并启用它或隐藏li并显示输入

如何在点击li时将li更改为输入文件？

1 个答案: