javascript - Angular foreach - 空值

Question

我遇到一个问题，当我尝试选择多个设备并将它们添加到组中时，所选设备的数组($scope.deviceIDs.push)无法获取值。任何人都可以看到这个问题或建议不同的方法。我用过http://www.dotnetawesome.com/2015/12/multiselect-dropdown-with-checkbox-in-angularjs.html作为我构建的服务的模板。

这是 Angular 代码。

 var MyApp = angular.module('MyApp', ['ui.bootstrap', 'angularjs-dropdown-multiselect']);
MyApp.controller('GroupsController', ['GroupsService', '$scope', '$log', '$uibModal',
function (GroupsService, $scope, $log, $uibModal) {
    $scope.groupSelected = [];
    $scope.location = '';
    $scope.groupguid = '';
    $scope.newGroupName = '';
    $scope.devicesNotinGroup = [];
    $scope.newGroupAddMember = 'false';
    $scope.isCollapsed = false;
    $scope.groupSelected.GroupID = 0;
    $scope.SelectedDevices = [];
    $scope.deviceIDs = [];
    $scope.dropdownSetting = {
        scrollableHeight: '200px',
        scrollable: true,
        enableSearch: true
    }

    // Populate Jobs
    GroupsService.GetDeviceList().then(function (d) {
        $scope.GroupList = d.data;
        console.log(d.data)
    }, function (error) {
        alert('Error!');
    });

    $scope.showChilds = function (item) {
        $scope.grouplist = [];

        item.active = !item.active;
        console.log("here item=" + item.GroupName + " active=" + item.GroupName.active);
        grouplist = item.SubGroup;

    };
    $scope.showInfoForGroup = function (item) {
        console.log("item = " + item + "Count = " + item.DeviceCount);
        GroupsService.GetGroupDeviceInformation(item).then(function (d) {
            $scope.groupSelected = d.data.devicegroupitem;
            //$scope.devicesNotinGroup = d.data.devicesnotingroup;
            angular.forEach(d.data.devicesnotingroup, function (value, index) {

            $scope.devicesNotinGroup.push({ label: value.HostName, id: value.HostName  });

            });
            //console.log($scope.devicesNotinGroup)
        })

    }, function (error) {
        console.log("item = " +item + "Count = " + groupSelected.DeviceCount);
    };
    $scope.DeleteDeviceFromGroup = function (deviceguid, groupguid ) {
        console.log("DeviceGuid = " + deviceguid + " GroupGuid = " + groupguid);
        GroupsService.DeleteDeviceFromList(deviceguid, groupguid).then(function (d) {
            $scope.groupSelected = d.data;
        })
    }
    $scope.AddDeviceToGroup = function (hostname, groupguid) {
        GroupsService.AddDeviceToGroup(hostname, groupguid).then(function (d) {
            $scope.showInfoForGroup(dt.guid);
            //$scope.groupSelected = d.data.devicegroupitem;
            //$scope.devicesNotinGroup = d.data.devicesnotingroup;
            $scope.newGroupAddMember = 'false';
        })
    }
    $scope.SubmitMultipleDevices = function (groupguid){
        $scope.deviceIDs = [];
        console.log($scope.SelectedDevices);
        angular.forEach($scope.SelectedDevices = function (value) {
            $scope.deviceIDs.push({ dname: value.HostName, dguid: groupguid } );
        });


        console.log('device ids ');
        console.log($scope.deviceIDs);
        var data = { deviceIDs: deviceIDs };
        console.log(data);
        angular.toJson(data);
        GroupsService.SubmitMultiDevicesToGroup(data)
                      .success(function () {

                      })
      .error(function (error) {

      });

    }


    $scope.CreateGroup = function (groupID, groupName, newGroupAddMember) {
        angular.isUndefinedOrNull = function (groupID) {
            return angular.isUndefined(groupID) || groupID === null
        }
        $scope.GroupList = '';
        console.log("check value equals" + groupID)
        GroupsService.CreateSubGroup(groupID, groupName, newGroupAddMember).then(function (d) {
            $scope.GroupList = d.data;
            $scope.newGroupName = '';
            $scope.newGroupAddMember = false;
        })
    }
    $scope.DeleteGroup = function (groupID) {
        $scope.GroupList = '';
        GroupsService.DeleteSubGroup(groupID).then(function (d){
        $scope.GroupList = d.data;
        $scope.newGroupName = '';
        })

    }
}])

MyApp.factory('GroupsService', function ($http) { // explained about factory in Part2
var fac = {};
fac.GetDeviceList = function () {
    return $http.get('/DeviceGroups/getgrouptree')
}
fac.GetGroupDeviceInformation = function (guid) {
    return $http.get('/DeviceGroups/GetGroupDeviceInfo?groupguid=' + guid)
}
fac.DeleteDeviceFromList = function (deviceguid, groupguid) {
    return $http.get('/DeviceGroups/DeleteDeviceFromGroup?deviceguid='+ deviceguid + "&groupguid=" + groupguid)
}
fac.AddDeviceToGroup = function (hostname, groupguid) {
    return $http.get('/DeviceGroups/AddDeviceToGroup?hostname=' + hostname + "&groupguid=" + groupguid)
}
fac.CreateSubGroup = function (groupID, groupName, newGroupAddMember) {
    return $http.get('/DeviceGroups/CreateGroup?GroupID=' + groupID + "&groupName=" + groupName + "&AddMember=" + newGroupAddMember)
}
fac.DeleteSubGroup = function (groupID) {
    return $http.get('/DeviceGroups/DeleteGroup?GroupID=' + groupID)
}
fac.SubmitMultiDevicesToGroup = function (data) {
    return $http.post('/DeviceGroups/AddMultipleDevicesToGroup', data)
}
return fac;
});

查看代码如下:

@model List<NetworkCafe.Models.DeviceGroup>

@{
ViewBag.Title = "Groups";
}
<style>
#clickable:hover {
    cursor: pointer;
}
.body-content{padding-top:50px}
.checkbox{padding:0;margin:0;}
.dropdown-menu{overflow:auto !important;}
.form-group div{display:inline-block; margin-right:10px}
</style>
<link rel="stylesheet" href="../Content/font-awesome.min.css">
<div class="container" style="width:90%" ng-app="MyApp" ng-controller="GroupsController">
<div class="col-lg-3">
    <div ng-class="dropdown" class="panel panel-warning">
        <div class="panel-heading">
            Tree List of Groups
        </div>
        <div class="panel-body">
            <script type="text/ng-template" id="tree-structure">
                <span>
                    <span id="clickable" ng-class="{'glyphicon glyphicon-chevron-up':(!dt.AddMembers) && (!dt.active), 'glyphicon glyphicon-chevron-down':(!dt.AddMembers) && (dt.active),  'childElement':(dt.AddMembers)}" ng-click="showChilds(dt)"></span>
                    <span id="clickable" ng-click="showInfoForGroup(dt.guid)"> {{dt.GroupName}} </span>
                </span>

                <ul ng-if="dt.AddMembers">
                    @*<li>Device Count: {{dt.DeviceCount}}</li>
                        <li>Total Ports: {{dt.TotalPortCount}}</li>
                        <li>Open Ports: {{dt.OpenPortCount}}</li>
                        <li>Reserved Ports: {{dt.ReservedPortCount}}</li>
                        <li>Percent Used: {{dt.PercentUsed}}</li>*@
                    @*<li><button ng-click="href"</li>*@
                </ul>
                <ul style="list-style: none" ng-show="dt.active" class="childElement">
                    <li ng-repeat="dt in dt.SubGroup" ng-include="'tree-structure'">

                    </li>
                </ul>

            </script>
        </div>
        <ul style="list-style: none" ng-class="list-group-item" class="parentList">
            <li ng-repeat="dt in GroupList" ng-include="'tree-structure'" style="list-style: none">

            </li>
        </ul>
    </div>
</div>
<div class="col-lg-3">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Group {{groupSelected.GroupName}} Information</h3>
        </div>
        <div class="panel-body">
            <span ng-hide="!groupSelected.AddMembers">
                This group has devices and can not have subgroups.
            </span>
            <table class="table table-striped table-hover" ng-hide="!groupSelected.AddMembers">
                <tr>
                    <td>Device Count: </td>
                    <td></td>
                    <td>{{groupSelected.DeviceCount}}</td>
                </tr>
                <tr>
                    <td>Total Ports: </td>
                    <td></td>
                    <td>{{groupSelected.TotalPortCount}}</td>
                </tr>
                <tr>
                    <td>Open Ports: </td>
                    <td></td>
                    <td>{{groupSelected.OpenPortCount}}</td>
                </tr>
                <tr>
                    <td>Reserved Ports: </td>
                    <td></td>
                    <td>{{groupSelected.ReservedPortCount}}</td>
                </tr>
                <tr>
                    <td>Percent Used:</td>
                    <td></td>
                    <td>{{groupSelected.PercentUsed}}</td>
                </tr>
            </table>

            <span ng-hide="groupSelected.AddMembers">
                This group has subgroups and can not have members.<br /><br />
                <label>CREATE SUBGROUP</label><br />
                <input ng-model="newGroupName" placeholder="Group Name" /><br />
                <label>Group Type</label><br />
                <input type="checkbox" ng-model="newGroupAddMember" ng-checked="!newGroupAddMember" />Group will be used for Device.<br />
                <button type="submit" class="btn btn-success" ng-click="CreateGroup(groupSelected.GroupID, newGroupName, newGroupAddMember)">Submit</button><br />----------------------- <br />
            </span>
            <span>
                <a class="btn btn-danger" ng-click="DeleteGroup(groupSelected.GroupID)">Danger Delete Group </a> <br />
                Delete Group. This will delete all subgroups and devices under this group.
            </span>

        </div>
    </div>
</div>
<div class="col-lg-6" ng-hide="!groupSelected.AddMembers">
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">Device List</h3>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-hover ">
                <tr>
                    <th></th>
                    <th>Device Name</th>
                    <th>Total Ports</th>
                    <th>Open Ports</th>
                    <th>Reserved Ports</th>
                    <th>Percent Used</th>
                </tr>
                <tr ng-repeat="dl in groupSelected.DeviceList">

                    <td> <i id="clickable" class="fa fa-times" ng-click="DeleteDeviceFromGroup(dl.guid, groupSelected.guid)"></i> &nbsp;</td>
                    <td>{{dl.DeviceName}}</td>
                    <td>{{dl.TotalPortCount}}</td>
                    <td>{{dl.OpenPortCount}}</td>
                    <td>{{dl.ReservedPortCount}}</td>
                    <td>{{dl.PercentUsed}}</td>
                </tr>
                <tr>
                    <td></td>
                </tr>

            </table>
            @*<ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">----------Add Device from Switch List----------<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="sl in devicesNotinGroup">
                            <span>
                                <i id="clickable" class="fa fa-plus-square" ng-click="AddDeviceToGroup(sl.HostName, groupSelected.guid)"></i> &nbsp; {{sl.HostName}} &nbsp; {{sl.Site}} &nbsp; {{sl.Zone}}
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>*@
            <form class="form-inline" name="myForm" role="form" ng-submit="SubmitMultipleDevices(groupSelected.guid)">
                <div class="form-group">
                    <label>Add Devices to Group: </label>
                    @* Directive *@
                    <div ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="devicesNotinGroup" selected-model="SelectedDevices" checkboxes="true"></div>
                </div>
                <br />
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div>
</div>

@section scripts{
<script src="~/Scripts/angular-1.4.9/ui-bootstrap-tpls-1.1.2.min.js"></script>
<script src="~/Scripts/AngularControllers/DeviceGroupsV2.js"></script>
<script src="~/Scripts/angular-1.4.9/angularjs-dropdown-multiselect.min.js"></script>
<script src="~/Scripts/angular-1.4.9/lodash.js"></script>
}

Answer 1

您的 forEach 循环不正确。

angular.forEach($scope.SelectedDevices = function (value) {
            $scope.deviceIDs.push({ dname: value.HostName, dguid: groupguid } );
        });

应该是:

angular.forEach($scope.SelectedDevices, function (value) {
            $scope.deviceIDs.push({ dname: value.HostName, dguid: value.groupguid } );
        });