AngularJs式が機能しない

Question

{{json_req}}という表現で奇妙な問題が発生しました。{{pseudo}}と{{password}}の式がうまくいきました。私が実際に行った変更を見ることができます。

{{json_req}}式では、ログインとパスワードの入力に何を書いても何も起こりませんでした。

私は基本的な間違いだと思いますが、私は今この1つで少し失われています。助けのための

感謝:)

login.htmlと

<div class="row"> 
    Pseudo : {{pseudo}} 
</div> 
<div class="row"> 
    Password : {{password}} 
</div> 
<div class="row"> 
    json : {{json_req}} 
</div> 
<div class="row"> 
    <label class="float-center"> 
    Pseudo 
    <input ng-model="pseudo" type="text" required> 
    <span class="form-error"> 
     Pseudo Missing. 
    </span> 
    </label> 
</div> 
<div class="row"> 
    <label class="float-center"> 
    Password 
    <input ng-model="password" type="password" required> 
    <span class="form-error"> 
     Password Missing. 
    </span> 
    </label> 
</div> 

LoginCtrl.js

mCtrl.controller('LoginCtrl', ['$scope', 'User', function ($scope, User) { 


    $scope.json_req = { 
    pseudo: $scope.pseudo, 
    password: $scope.password 
    }; 

    $scope.LoginUser = function() { 
    if ($scope.json_req.pseudo != undefined && $scope.json_req.password != undefined) { 
     User.login($scope.json_req).then(function (data) { 
     $scope.response = data; 
     $scope.json_req = {}; 
     }); 
    } else 
     console.log("UNDEFINED"); 
    }; 
}]); 

Answer 1

はこれを試してみてください。そして、私が

私はNG-モデルを記述する必要がありますXDから愚かな間違いだったと予想される=「json_req.pseudo」としませjson_reqオブジェクト埋めるためにNG-モデル=「擬似」：/

申し訳ありませんが持っていますあなたたちを悩ました！

ありがとうございました

Answer 2

これは正常な動作です。あなたが書くとき：

$scope.json_req = { 
    pseudo: $scope.pseudo, 
    password: $scope.password 
}; 

をあなたは$scope.pseudoと$scope.passwordの値の「スナップショット」を作成します。後でモデルを変更すると、更新されません。

pseudoまたはpasswordのいずれかが変更された場合は、$scope.$watchと更新json_reqを設定できます（実際はお勧めできません）。それとも何私は、お勧めスコープにgetter関数を記述します。私は解決策を見つける

angular.module("asdfapp",[]).service("User",function(){}).controller('LoginCtrl', ['$scope', 'User', 
 
             function ($scope, User) { 
 

 

 
    $scope.json_req = { 
 
    pseudo: "", 
 
    password: "" 
 
    }; 
 

 
    $scope.LoginUser = function() { 
 
    if ($scope.json_req.pseudo != undefined 
 
     && $scope.json_req.password != undefined) { 
 
     User.login($scope.json_req).then(function (data) { 
 
     $scope.response = data; 
 
     $scope.json_req = {}; 
 
     }); 
 
    } else 
 
     console.log("UNDEFINED"); 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="asdfapp" ng-controller="LoginCtrl"> 
 
<div class="row"> 
 
    Pseudo : {{json_req.pseudo}} 
 
</div> 
 
<div class="row"> 
 
    Password : {{json_req.password}} 
 
</div> 
 
<div class="row"> 
 
    json : {{json_req}} 
 
</div> 
 
<div class="row"> 
 
    <label class="float-center"> 
 
    Pseudo 
 
    <input ng-model="json_req.pseudo" type="text" required> 
 
    <span class="form-error"> 
 
     Pseudo Missing. 
 
    </span> 
 
    </label> 
 
</div> 
 
<div class="row"> 
 
    <label class="float-center"> 
 
    Password 
 
    <input ng-model="json_req.password" type="password" required> 
 
    <span class="form-error"> 
 
     Password Missing. 
 
    </span> 
 
    </label> 
 
</div> 
 
</div>

Answer 3

OK：

Object.defineProperty($scope, 'json_req', { 
    get: function() { 
    return { 
     pseudo: $scope.pseudo, 
     password: $scope.password 
    } 
    } 
});