Question

我有一个div应该这样显示，但是当你点击div时，我需要它转换成输入字段。

这就是点击div之前我所拥有的：

<div>This is the content.</div>

点击它时我想成为以下人物：

<input>This is the content.</input>

当用户点击其他地方时更改回来。

Angular有可能这样吗？我考虑使用ng-change作为HTML标记，但我似乎无法实现它。

感谢任何帮助。

Answer 1

试试这个

<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div>
<input ng-show='showInput'>This is the content.</input>

和控制器具有类似

的功能

function cntrl($scope){

    $scope.showInput = false;
    $scope.toggleShowInput = function()
     {
         $scope.showInput = !$scope.showInput;
     }
}

Answer 2

如果你使用Angular，你应该写两个元素，并在用户点击时为另一个切换：

＆＃13;

<?php

$vehicles = ['Cars', 'Bikes', 'Trucks'];

$details = [
    [
        'primary-category' => 'Automobiles',
        'secondary-category' => 'Cars',
        'tertiary-category' => 'BMW'
    ],
    [
        'primary-category' => 'Automobiles',
        'secondary-category' => 'Trucks',
        'tertiary-category' => 'Benz'
    ]
];

foreach ($vehicles as $vehicle) {
    foreach ($details as $detail) {
        if ($vehicle == $detail['secondary-category']) {
            echo $detail['tertiary-category'];
            break;
        }
    }
}

?>

＆＃13;

Answer 3

不，但好消息是你不需要这样做！

在您的控制器中：

$scope.showInput = false;
$scope.myContent = "This is the content";

返回HTML文件：

＆＃13;

<div ng-hide="showInput">{{myContent}}</div>
<input ng-show="showInput" ng-model="myContent" type="text" />
<button ng-click="showInput = true" />

＆＃13;

现在，当单击该按钮时，将显示输入字段，但文本不会显示。

单击时将字段类型从div转换为输入

3 个答案: