AngularJS实现输入框清除与恢复原值功能问题求助

问题根源 #

你当前c.clicks()函数里的!''是JavaScript布尔运算：空字符串''属于JS假值，取反后得到true，所以点击Click2时输入框会显示true，这完全不是恢复原值的逻辑。

正确实现思路 #

要实现「清除-恢复」功能，核心是在清除前先保存输入框的原始值，恢复时直接把保存的值赋值回去。

修改后的完整代码 #

HTML部分

<input ng-model="c.filterName">
<button ng-click="c.clearInput()">Click 1</button>
<button ng-click="c.restoreInput()">Click 2</button>

控制器JS部分

// 初始化时先保存输入框的初始值
c.originalFilterName = c.filterName;

// 清除输入框函数
c.clearInput = function(){
    // 每次清除前，更新保存的当前值（支持多次修改后清除-恢复）
    c.originalFilterName = c.filterName;
    c.filterName = '';
}

// 恢复输入框原值函数
c.restoreInput = function(){
    c.filterName = c.originalFilterName;
}

补充说明 #

• 如果只需要恢复页面加载时的初始值，可去掉clearInput里的c.originalFilterName = c.filterName，仅保留初始化时的赋值即可。
• 如果要支持用户修改输入内容后多次执行清除-恢复，保留clearInput里的赋值逻辑，确保每次保存的都是清除前的最新值。

内容的提问来源于stack exchange，提问作者Srinivas