javascript - 语义嵌套 ng-model

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-model 名称。这是我正在谈论的内容的一个完整的例子。我将模型设置为合理的深度，只有 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

您可以在模板和嵌套范围中使用 ng-init。这可以使您的 Controller 保持干净并仅在模板中使用子范围:

<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'
            }
        }
    };
});