Вложенная ng-модель семантически

Question

У меня очень большая модель, я создаю форму для использования AngularJS. Он вложен на 4 уровня в глубину, и имена полей на модели очень длинные. Я в конечном итоге с разметкой, как это.

<input type="text" ng-model="something_super_long.another_very_long_thing.hey_lets_add_another.ok_one_more._last_one_seriously"></input> 

Это довольно раздражает. Хотелось бы, чтобы я мог создать какое-то вложенное наследование, чтобы избежать многократных имен супер длинной ng-модели. Ниже приведено полное описание того, о чем я говорю. Я сделал модель REASONABLE уровнем глубины только 3 уровня не столь длинных имен.

Вместо этого.

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
    <input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_1" /> 
    <input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_2" /> 
    <input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_3" /> 
    </div> 
</div> 

Я хочу сделать что-то еще вроде этого:

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
    <div ng-model="building_in_san_francisco"> 
     <div ng-model="layout_floor_1"> 
     <input type="text" ng-model="room_1" /> 
     <input type="text" ng-model="room_2" /> 
     <input type="text" ng-model="room_3" /> 
     </div> 
    </div> 
    </div> 
</div> 

Кто-нибудь знает, если что-нибудь, как это возможно?

Answer 1

Вы можете попробовать это в вашем контроллере:

$scope.something=building_in_san_francisco.layout_floor_1; 

И когда вы называете это

<input type="text" ng-model="something.room_1" /> 

Answer 2

Вы можете использовать нг-Init в шаблонах и гнездовых областей. Это держит ваш контроллер чистой и использует дочерние рамки только в шаблоне:

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <div ng-scope ng-init="building = buildings.building_in_san_francisco"> 
      <div ng-scope ng-init="floor = building.layout_floor_1"> 
       <input type="text" ng-model="floor.room_1" /> 
       <input type="text" ng-model="floor.room_2" /> 
       <input type="text" ng-model="floor.room_3" /> 
      </div> 
     </div> 
    </div> 
</div> 

JS

angular.module('myApp', []) 
.controller('myController', function mainCtrl($scope) { 
    $scope.buildings = { 
     building_in_san_francisco: { 
      layout_floor_1: { 
       room_1: '1', 
       room_2: '2', 
       room_3: '3' 
      } 
     } 
    }; 
});