代码之家  ›  专栏  ›  技术社区  ›  code.cycling

Angular JS级联选择,带有ng模型和ng选项

  •  0
  • code.cycling  · 技术社区  · 6 年前

    所以我被困在3rc select 已连接到上一个选择模型。

    首先,您必须选择 树枝 之后,您可以选择 建筑物名称 关于什么 地板 .

    vm。位置数据

    [
    {
        "_id": "5a61acfdd5df1761dd2eb1ef",
        "branch": "Lucena City",
        "__v": 0,
        "building": [
            {
                "name": "mhq",
                "floors": [
                    "1st",
                    "2nd",
                    "3rd"
                ]
            }
        ],
        "dateCreated": "2018-01-19T08:31:57.121Z"
    },
    {
        "_id": "5a61ad6fd5df1761dd2eb1f1",
        "branch": "Lucban",
        "__v": 0,
        "building": [
            {
                "name": "mhq",
                "floors": [
                    "ground floor",
                    "2nd floor",
                    "3rd floor",
                    "4th floor",
                    "5th floor"
                ]
            }
        ],
        "dateCreated": "2018-01-19T08:33:51.761Z"
    },
    {
        "_id": "5a61ada1d5df1761dd2eb1f2",
        "branch": "loperz",
        "__v": 0,
        "building": [
            {
                "name": "lope",
                "floors": [
                    "ground floor",
                    "1st floor"
                ]
            }
        ],
        "dateCreated": "2018-01-19T08:34:41.904Z"
    }]
    

    html端

    <div class="row justify-content-md-center">
    <div class="col-md-4">
        <label for="branch">
            <strong>Branch</strong>
        </label>
        <select ng-options="loc as loc.branch for loc in vm.locations" ng-model="vm.locationTest" class="form-control">
        </select>
        <small id="emailHelp" class="form-text text-muted">Select branch.</small>
    </div>
    <div class="col-md-4">
        <label for="building">
            <strong>Building</strong>
        </label>
        <select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
        </select>
    </div>
    <div class="col-md-4">
        <label for="roomFloor">
            <strong>Room Floor</strong>
        </label>
        <select ng-options="ds as ds for ds in vm.locationTest.floors" ng-model="vm.roomData.roomFloor" class="form-control">
        </select>
    </div>
    

    选择一个分支是有效的,之后我就无法将数据传递到第二个和第三个分支 选择 . 我不太擅长处理对象数据。

    1 回复  |  直到 6 年前
        1
  •  1
  •   pathurs    6 年前

    看起来您在此处输入错误:

    <select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
    </select>
    

    特别是 vm.locationTest 应该是 vm.locationTest.building ds.building 应该是 ds.name

    那么它将是:

    <select ng-options="ds as ds.name for ds in vm.locationTest.building" ng-model="vm.roomData.building" class="form-control">
    </select>
    

    然后,我们还需要修复第3个 ng-options :

    vm.locationTest.floors 成为 vm.roomData.building.floors