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模型名称。这是我正在谈论的完全充实的例子。我使模型成为一个合理的深度级别，只有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。这样可以保持控制器清洁并仅在模板中使用子范围：

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

Answer 2

您可以在控制器中尝试此操作：

$scope.something=building_in_san_francisco.layout_floor_1;

当你打电话时

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

在语义上嵌套ng模型

2 个答案: