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。私は両方とも少なくとも 2 人のキャラクターを必要とすることを選択しました...必要なことは何でもできます。

これを説明する 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 に答える