선택 메뉴가 선택된 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>

당신은 updateUser 기능 및 업데이트 사용자 개체 호출을 변경 드롭 다운의 dropdown.whenever 값 겨 변화를 사용하여 수행 할 수 있습니다

당신은 모든 일이 여기서 일하는 볼 수 있습니다.

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

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

출처

2017-03-17 17:19:28

선택 메뉴가 선택된 AngularJS 업데이트 양식?

답변

관련 문제