Javascript 在ANGULAR JS中选择父视图模型和子视图模型后检索图像_Javascript_Jquery_Angularjs_Mvvm

Javascript 在ANGULAR JS中选择父视图模型和子视图模型后检索图像

javascript jquery angularjs mvvm

Javascript 在ANGULAR JS中选择父视图模型和子视图模型后检索图像,javascript,jquery,angularjs,mvvm,Javascript,Jquery,Angularjs,Mvvm,我在Angular中创建了一个选择菜单，并为第一个过滤器列表的元素分配了一个父ID，为第二个过滤器列表的元素分配了一个子ID 通过使用 ng options=“vm.ContextData.selectChildren中项目的item.name |筛选器：{parentId:vm.selectedParent.id} 我可以在vm中检索每个项目的项目名称。我想将此功能更改为检索图像，以便我可以以易于理解的方式为最终用户显示内容（我的用户确实需要根据他们选择的选项以非常图形化的方式解释要做什么）

我在Angular中创建了一个选择菜单，并为第一个过滤器列表的元素分配了一个父ID，为第二个过滤器列表的元素分配了一个子ID

通过使用

ng options=“vm.ContextData.selectChildren中项目的item.name |筛选器：{parentId:vm.selectedParent.id}

我可以在vm中检索每个项目的项目名称。我想将此功能更改为检索图像，以便我可以以易于理解的方式为最终用户显示内容（我的用户确实需要根据他们选择的选项以非常图形化的方式解释要做什么）

HTML

    <!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Dependent-Select2 MetroUI and AngularJS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro-responsive.min.css'>



</head>

<body>
  <body ng-app="app" ng-controller="AppCtrl as vm">
    <div class="flex-grid">
        <div class="row">
            <div class="cell colspan2 margin10">
                <div class="input-control full-size" data-role="select" data-placeholder="Account type" data-allow-clear="true">
                    <select class="full-size" style="display:none" ng-model="vm.selectedParent" ng-options="item.name for item in vm.ContextData.selectParents">
                        <option value=""></option>                        
                    </select>
                </div>
            </div>
            <div class="cell colspan2 margin10">
                <div class="input-control full-size" data-role="select" data-placeholder="Action" data-allow-clear="true">
                    <select class="full-size" style="display:none" ng-model="vm.selectedChild" ng-options="item.name for item in vm.ContextData.selectChildren | filter:{parentId:vm.selectedParent.id}">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-grid margin10">
        <div class="row">

            <div class="cell colspan3">
                {{vm.selectedParent}}
            </div>
        </div>
        <div class="row">

            <div class="cell colspan3">
                {{vm.selectedChild}}
            </div>
        </div>
    </div>    
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js'></script>
<script src='https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/js/metro.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

您可以使用

元素上的

ng change

功能执行此操作吗？它不起作用：(

(function () {
"use strict";
var app = angular.module("app", []);

app.controller("AppCtrl", AppCtrl);

function AppCtrl() {
    var vm = this;

    vm.ContextData = {
        selectParents: [{ "id": 1, "name": "NT Account" },
            { "id": 2, "name": "Intranet account" },
            { "id": 3, "name": "Not assigned" },
            { "id": 4, "name": "Not assigned" }],
        selectChildren: 
        /*NT Account*/
        [
            { "id": 1, "parentId": 1, "name": "Create" },
            { "id": 2, "parentId": 1, "name": "Delete" },
            { "id": 3, "parentId": 1, "name": "Modify" },
            { "id": 4, "parentId": 1, "name": "Reset password" },
        /*Intranet account*/
            { "id": 1, "parentId": 2, "name": "Create" },
            { "id": 2, "parentId": 2, "name": "Delete" },
            { "id": 3, "parentId": 2, "name": "Modify" },
            { "id": 4, "parentId": 2, "name": "Reset password" },

        ]
    };            
}
})();