3

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 做到这一点？

4

2 回答 2

11

为您的表单命名，例如：

<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>

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

于 2013-06-03T06:24:57.727 回答
3

这是一个仅在两个字段都有数据时才显示元素的示例：

<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;
    }
};
于 2013-04-14T15:55:50.860 回答