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>

如果您更改表单中的表单元素的任何，并且没有根据原始值检查输入值的缺点，这种方法的优点是显示保存按钮，只是它们的事实已被编辑。

Answer 2

以下是仅在两个字段都包含数据时显示元素的示例：

<div ng-controller="TestCtrl" ng-app>
    <ul ng-show="enableSave(data)">
        <li><a><i class="icon-white icon-save"></i></a></li>
    </ul>

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

这是你的控制器：

function TestCtrl($scope) {
    $scope.data = {firstname: "", lastname: ""};

    $scope.enableSave = function(data) {
         return data.firstname.length > 1 && data.lastname.length > 1;   
    };    
}

您可以将所需的任何逻辑放入enableSave。我选择要求他们至少有两个角色......你可以随心所欲。

这是一个说明它的jsFiddle：http://jsfiddle.net/nDCXY/1/

OP编辑：我的解决方案

$scope.enableSave = function(user) {
    if(!angular.equals(user, oldUser)){
        return true
    }else{
        return false;
    }
};

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

2 个答案: