選択メニューのAngularJS更新フォーム？

私は、ユーザー情報を入力するためのフォームmyFormを持っています。フィールドは、すべてのコントローラでモデルに関連付けられています：期待通りに入力したとして、私は名前を見選択メニューのAngularJS更新フォーム？

 {{abc.user | json}}

を使用して、入力すると、私は、ユーザーの値をトレース場合

<input type="text" name="name" class="form-control" 
     ng-model="abc.user.name" 
     ng-model-options="{ updateOn: 'blur'}" 
     required>

これは、動作します。このデータが移入

<select ng-model="abc.country.selectedCountry" name="country" ng-options="option.name for option in abc.country.options track by option.code" class="form-control"></select>

：選択した国に応じて、ページの一部のコンテンツを変更する

_this.country = { 
    options: [ 
     { name: 'United States', code: 'US' }, 
     { name: 'Canada', code: 'CA' }, 
     { name: 'United Kingdom', code: 'UK' }, 
     { name: 'France', code: 'FR' }, 
     { name: 'Japan', code: 'JP' }, 
     { name: 'Brazil', code: 'BR' } 
    ], 
    selectedCountry: { name: 'United States', code: 'US' } 
    };

{ 
    "name": "John" 
}

私のフォームは、上部の国のメニューを持っています。たとえば、次のように

<div ng-if="abc.country.selectedCountry.code == 'US'" id="us">American stuff</div>

しかし、私はとがuser対象に「国」に選ばれた値を割り当てることをどのように行うのですか？私がこれまでにやろうとしていることはすべて、私のng-ifを破ります。

あなたは全体のものがここで働いて見ることができます：https://plnkr.co/edit/uvZBb8OS55Bcop9SCDLM?p=preview

出典

2017-03-17 Steve

あなたはより精巧なことができますか？ –

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-controller="MainCtrl as abc"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <p>Hello {{name}}!</p> 
     <form name="myForm" novalidate=""> 

     <div class="row"> 
      <div class="col-md-12"> 
      <!--country selection--> 
      <div class="form-group"> 
       <label>Country</label> 
       <select ng-model="abc.country.selectedCountry" name="country" ng-options="option.name for option in abc.country.options track by option.code" class="form-control" ng-change="updateUser(abc.country.selectedCountry)"></select> 
      </div> 

      </div> 
     </div> 

     <div class="row"> 
      <div class="col-md-12"> 
      <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine }"> 
       <label>Name</label> 
       <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-model-options="{ debounce: 200 }" required> 
       <p ng-show="myForm.name.$invalid && !myForm.name.$pristine" class="help-block">Enter your name.</p> 
      </div> 
      </div> 
     </div> 
     </form> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <pre> {{abc.user | json}}</pre> 
     <div ng-if="abc.country.selectedCountry.code == 'US'" id="us">American stuff</div> 
     <div ng-if="abc.country.selectedCountry.code == 'JP'" id="jp">Japanese stuff</div> 
     <div ng-if="abc.country.selectedCountry.code == 'BR'" id="br">Brazilian Stuff</div> 
     <div ng-if="abc.country.selectedCountry.code == 'FR'" id="fr">French stuff</div> 
     <div ng-if="abc.country.selectedCountry.code == 'UK'" id="uk">UK stuff</div> 
     <div ng-if="abc.country.selectedCountry.code == 'CA'" id="ca">Canada stuff</div> 
    </div> 
    </div> 
</body> 

</html>

あなたがドロップダウンのdropdown.whenever値のngの変更は、それがupdateUser関数を呼び出すと、ユーザーオブジェクトを更新します変更使用して行うことができます。

$scope.updateUser = function(selectedCountry) { 
     _this.user.selCountry = selectedCountry; 
    }

https://plnkr.co/edit/gVt4PvI1cKmXM0jxLlqR?p=preview

出典

2017-03-17 17:19:28

選択メニューのAngularJS更新フォーム？

答えて

関連する問題