Angular가 있는 루프 내부의 라벨을 사용하는 방법JS

Angular가 있는 루프 내부의 라벨을 사용하는 방법JS

그래서 나는 안에 있다.ng-repeat다음과 같습니다.

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL">name</label>
       <input  id="UNIQUELABEL">
       <label for="ANOTHERUNIQUELABEL">name2</label>
       <input  id="ANOTHERUNIQUELABEL">
    </form>
</li>

그럼 이런 게 나올 거야

<li>
    <form>
       <label for="UNIQUELABEL1">name</label>
       <input  id="UNIQUELABEL1">
       <label for="ANOTHERUNIQUELABEL1">name2</label>
       <input  id="ANOTHERUNIQUELABEL1">
    </form>
</li>
<li>
    <form>
       <label for="UNIQUELABEL2">name</label>
       <input  id="UNIQUELABEL2">
       <label for="ANOTHERUNIQUELABEL2">name2</label>
       <input  id="ANOTHERUNIQUELABEL2">
    </form>
</li>
...

Angular는 처음입니다.JS와 이에 대한 올바른 접근 방법을 확신할 수 없습니다(어떤 문서도 이를 사용하지 않음).label(전혀야 합니다.

정답은 글레노의 것이다.

$id작성한 범위마다 일의임을 보증합니다.$index밑줄 컬렉션의 카운트가 변경되면 변경됩니다.

리피터의 스코프에서 사용할 수 있는 $index 속성(0 베이스)을 추가해야 합니다.

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL{{$index+1}}">name</label>
       <input  id="UNIQUELABEL{{$index+1}}">
       <label for="ANOTHERUNIQUELABEL{{$index+1}}">name2</label>
       <input  id="ANOTHERUNIQUELABEL{{$index+1}}">
    </form>
</li>

부터ng-repeat각 반복마다 새로운 스코프 오브젝트를 제공합니다.저는 다음과 같은 것을 사용하는 것을 선호합니다.

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL{{::$id}}_1">name</label>
       <input  id="UNIQUELABEL{{::$id}}_1">
       <label for="UNIQUELABEL{{::$id}}_2">name2</label>
       <input  id="UNIQUELABEL{{::$id}}_2">
    </form>
</li>

이 방법의 장점은 문서에 동일한 ID를 가진 중복된 셀렉터가 없는 것이 보증된다는 것입니다.그렇지 않으면 라우팅 또는 애니메이션을 수행할 때 중복이 쉽게 발생할 수 있습니다.

많은 시나리오에서 더 나은 해결책은 두 가지 모두를 포함하는 것입니다.<input>및 단일 텍스트에 레이블 지정<label>요소.이것은 완전히 유효한 HTML로 모든 브라우저에서 올바르게 동작하며 반복 변수를 사용할 필요가 없기 때문에 계층 데이터를 쉽게 사용할 수 있다는 추가적인 이점이 있습니다.

<li ng-repeat="x in xs">
   <label>
       Label Text
       <input type="text">
   </label>
</li>

언급URL : https://stackoverflow.com/questions/14663397/how-to-use-labels-inside-loops-with-angularjs