AngulaJS поля ввода не потерять фокус при нажатии

Question

Я пытаюсь создать простую angularjs формы, где я хочу иметь вложенный объект как нг-модель

$scope.project = { 
    name:"Some Name", 
    location:{line1:"" , line2:"", city:"", zipcode:""} 
} 

http://plnkr.co/edit/RfN7qZBX3HlOtGhFOdFX?p=preview

теперь проблема, когда я нажимаю on line2, city, state etc focus возвращается к строке1 пытался сменить HTML и несколько других вещей, но не знаю, что делать .. Пробовал также удалить загрузочный лоток.

Answer 1

Проблема в том, что вы неправильно используете тег <label>. Вместо этого:

<label class="form-group"> 
    Client Location 
    <div class="controls"> 
     <input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1"> 
     <input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2"> 
     <input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City"> 
     <input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State"> 
     <input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code"> 
     <input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country"> 
     </div> 
    </label> 

Попробуйте это:

<div class="form-group"> 
    <label>Client Location</label> 
    <div class="controls"> 
     <input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1"> 
     <input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2"> 
     <input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City"> 
     <input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State"> 
     <input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code"> 
     <input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country"> 
    </div> 
</div> 

Первая метка должна быть изменена, а также. Вместо этого:

<label class="form-group">Name 
    <div class="controls"> 
      <input type="text" data-ng-model="project.name" class="form-control" placeholder="Name"> 
    </div> 
</label> 

Попробуйте это:

<div class="form-group"> 
    <label>Name</label> 
    <div class="controls"> 
     <input type="text" data-ng-model="project.name" class="form-control" placeholder="Name"> 
    </div> 
</div> 

Или это:

<div class="form-group"> 
    <label> 
    Name 
    <input type="text" data-ng-model="project.name" class="form-control" placeholder="Name"> 
    </label> 
</div>