angularjs - 仅在 angular.js 中的表单输入更改时显示按钮

Question

HTML:

<ul>
    <li><a><i class="icon-white icon-save"></i></a></li>
</ul>

<form>
     <input type="text" value="{{ selectedUser.firstname }}" ng-model="selectedUser.firstname">
     <input type="text" value="{{ selectedUser.lastname }}" ng-model="selectedUser.lastname">
</form>

我正在处理从我的 REST API 获取的用户对象。所以基本上有一个用户列表。点击上面的表格就会显示出来。

function UserController($scope, User){
    $scope.users = User.query();

    $scope.selectedUser = null;

    $scope.select = function(user){
        $scope.selectedUser = user;
    }
}

我只想在表单值更改时显示保存链接。任何想法如何使用 angular.js 做到这一点？

Answer 1

为您的表单命名，例如:

<form name="dataForm">
  <input type="text" name="firstname" ng-model="data.firstname" />
  <input type="text" name="lastname" ng-model="data.lastname" />
</form>

表单现在将是您范围内的命名模型，您可以根据表单是否原始来隐藏/显示保存按钮:

<ul ng-hide="dataForm.$pristine">
  <li><a><i class="icon-white icon-save"></i></a></li>
</ul>

这种方法的优点是，如果您更改表单内的任何表单元素，就会显示保存按钮，而缺点是不会根据原始值检查输入值，仅检查它们已被编辑的事实。