IT박스

Angular에서 2 개의 모델을 하나의 입력 필드에 바인딩하는 방법은 무엇입니까?

itboxs 2020. 10. 29. 07:55
반응형

Angular에서 2 개의 모델을 하나의 입력 필드에 바인딩하는 방법은 무엇입니까?


어쨌든 두 모델 값을 하나의 입력 필드에 바인딩 할 수 있습니까?

다음과 같이 범위에서 두 변수의 값이되고 싶은 입력 필드가 있다고 가정합니다.

<input type="text" model="sn_number; id" > 

할 수 없지만 몇 가지 해결 방법이 있습니다.

1. ngChange를 사용하여 다른 모델 업데이트

<input type="text" 
       ng-model="sn_number" 
       ng-change="id=sn_number"/> 

2. 모델을 볼 수 있으며 변경시 다른 모델을 업데이트 할 수 있습니다.

$scope.$watch('sn_number', function(v){
  $scope.id = v;
});

id동기화를 유지하려면 변경 사항도 지켜봐야 합니다.

여기에 예


ng-change뿐만 아니라 필드를 즉시 바인딩 할 수 있으며 실제로 데이터 바인딩이 아닌 유일한 각도 표현입니다.

  <label>Name</label>
  <input type="text" ng-model="name" value="{{name}}"/>

  <label>Key</label>
  <input type="text" ng-model="key" value="{{key=name}}" />


입력을 모델의 두 변수에 바인딩하는 것은 의미가 없습니다. 바인딩은 양방향으로 작동하므로 모델이 업데이트되면 필드가 업데이트되고 그 반대의 경우도 마찬가지입니다. 두 개의 변수에 바인딩한다면, 단일 진실 소스는 무엇일까요?

그러나 ng-change를 사용하여 필드가 변경 될 때 두 개의 변수를 설정할 수있는 컨트롤러에서 메서드를 호출 할 수 있습니다.


ng-init 사용

<div ng-controller="ctrl" ng-init="model = { year: '2013', month:'09'}">

또는

<div ng-repeat="c in contact" ng-init="likes = { food: 'steak', drink:'coke'}">

참고 URL : https://stackoverflow.com/questions/13890331/how-to-bind-2-models-to-one-input-field-in-angular

반응형