programing

ng-model과 ng-value의 차이/비호환성은 무엇입니까?

muds 2023. 4. 1. 10:02
반응형

ng-model과 ng-value의 차이/비호환성은 무엇입니까?

내가 이해한 한 ng-model은 모델이 할당된 특정 요소의 값을 설정합니다.ng-value는 ng-model과 어떻게 다릅니까?

이 값은 ng-model과 연계하여 동작합니다.무선 및 선택에서는 해당 항목이 선택되었을 때 ng-model로 설정됩니다.요소의 'value' 애트리뷰트 대신 사용합니다.이 애트리뷰트는 항상 관련된ng-model에 문자열 값을 저장합니다.

옵션 버튼의 컨텍스트에서는 문자열 이외의 값을 사용할 수 있습니다.예를 들어 '예' 및 '아니오'(또는 이에 상당하는 값) 라디오 버튼이 '참' 및 '거짓'인 경우 - '값'을 사용하면 ng-model에 저장된 값이 문자열이 됩니다.'ng-value'를 사용하면 부울로 남습니다.

단, 선택 요소의 경우 ng-value는 항상 문자열로 취급됩니다.선택 항목에 문자열 이외의 값을 설정하려면 ngOptions를 사용합니다.

간단한 설명

ng 모델

  1. 스코프 및 html에서 사용할 수 있는 변수의 양방향 바인딩에 사용됩니다.
  2. 가지고 있다$modelValue(가치는 실제 범위에 있음)&$viewValue(보기에 표시되는 값).
  3. name Atribut과 함께 폼에 기재한 경우 angular는 $error, $valid, $invalid 등의 검증 Atribut을 내부적으로 작성합니다.

예.

<input type="text/checkbox/radio/number/tel/email/url" ng-model="test"/>

ng값

  1. 각각에 값을 할당하는 데 사용됩니다.ng-model와 같은 가치관을 가지다input,select&textarea(동일한 조작은, 을 사용해 실시할 수 있습니다.ng-init)
  2. ng-value를 설정하고 있는 경우, 적절한 바인딩을 제공합니다.ng-model쓰는 동안 에이잭스를 통해 값 설정value속성이 지원하지 않습니다.
  3. 기본적으로는 다음 용도로 사용됩니다.radio&option작성 중 태그 지정select옵션을 동적으로 선택합니다.
  4. 가질 수 있는 건stringvalue it. 객체 값을 지원하지 않습니다.

HTML

<input
  [ng-value="string"]>
...
</input>

또는

<select ng-model="selected">
  <option ng-value="option.value" ng-repeat="option in options">
     {{option.name}}
  </option>
</select>

...

용도가 좋다ng-valueinput필드는 변수에 바인드하지만 다른 변수의 값을 기반으로 하는 경우입니다.예:

<h1>The code is {{model.code}}.</h1>
<p>Set the new code: <input type="text" ng-bind="model.code" /></p>

사용자가 에 입력했을 때input, 타이틀의 값이 갱신됩니다.이것을 원하지 않는 경우는, 다음과 같이 수정할 수 있습니다.

<input type="text" ng-value="model.code" ng-bind="model.theNewCode" />

theNewCode갱신되겠지만code그대로 남습니다.

https://docs.angularjs.org/api/ng/directive/ngValue,에 따르면 ngValue는 "입력 요소의 값 속성에 바인딩되는 값 표현식"을 취합니다.

따라서 ng-value="hard"를 사용하면 표현식으로 해석되고 값은 $138.hard에 바인딩됩니다(정의되지 않았을 수 있습니다).ngValue는 식을 평가하는 데 유용합니다. 하드 코드화된 값을 설정하는 경우 값보다 이점이 없습니다.단, ngValue를 사용하여 값을 하드코드하는 경우에는 ":"로 둘러싸야 합니다.

ng-value='하드'

ng-model은 폼 요소 내에 배치되는 것을 목적으로 하며 양방향 데이터 바인딩($view & view -- > $view)이 있습니다.<input ng-model="val"/>.

또는 ng-model 디렉티브는 HTML 컨트롤(입력, 선택, 텍스트 영역)의 값을 애플리케이션 데이터에 바인드합니다.

문서에는 '하다'라고 적혀 있다.ng-value쌍방향 바인딩을 할 때는 사용하지 마십시오.ng-model.

문서에서:

ng값

지정된 식을 요소의 값에 바인딩합니다.

또한 입력 요소와 같은 입력 요소에 대한 특정 식의 단방향 바인딩을 실현하기 위해 사용할 수 있습니다.input[text] ★★★textarea해당 요소가 를 사용하지 않는 경우 ngModel.

- 각진JS Directive API 참조

대신 컨트롤러에서 값을 초기화합니다.

언급URL : https://stackoverflow.com/questions/28717523/whats-the-difference-incompatibility-between-ng-model-and-ng-value

반응형