AngularJS更新表單與選擇菜單選項？

我有一個表格，myForm用於輸入用戶信息。字段都綁在控制器模型：AngularJS更新表單與選擇菜單選項？

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

可正常工作，如果我描繪出用戶的價值在您輸入，使用

 {{abc.user | json}}

我看到名稱爲輸入。

{ 
    "name": "John" 
}

我的形式在頂部的國家菜單：

<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' } 
    };

哪些變化取決於所選擇的國家的頁面上的一些內容。例如：

<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更新表單與選擇菜單選項？

回答

相關問題