Question

我使用简单的角度js选择列表框有多个选择，我用来通过点击添加按钮将元素添加到选择中，这将在列表框中动态添加服务器名称，也选择多种类型，我可以多单击“删除”按钮选择并删除该项目。

问题是我无法在删除项目时将所选索引设置为零或第一个元素...此后我也无法选择任何项目..

简单地删除了我需要将所选索引设置为“NO SELECTION”或第一个元素的元素。

ServerPing.jsp

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html>
<head>

<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="/LDODashBoard/js/scripts.js" language="JavaScript" type="text/javascript"></script>
<script src="/LDODashBoard/js/PingServerPage.js" language="JavaScript" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<link rel="stylesheet" type="text/css" href="/LDODashBoard/css/mystyle.css" />
<link rel="stylesheet" type="text/css" href="/LDODashBoard/css/ServerPing.css" />

<body>


    <div ng-app="myApp" ng-controller="myCtrl" style="color:white" div align="left">

        <br/><br/>  
        <form name = "ServerPing" novalidate>

            <label for="marketArraySel" >Server Name:</label>
            <input type = "text" id="serverName" name="serverName" ng-model="serverName"></input>

            <input type="button" ng-click="addServerName()" value="Add"></input>            

            <br/><br/>

            <span id="tab"></span>
            <span id="tab"></span>

            <select name="serverNameList" id="serverNameList" data-ng-model="serverNameList" data-ng-options="server.SERVER for server in serverListArray" multiple data-ng-multiple="true">
            </select>

            <input type="button" ng-click="remove(serverNameList)" value="Remove"></input>

            <br/><br/>
            {{serverNameList}}
            <br/><br/>  
            <input type="reset" ng-click="reset()" value="RESET"></input>
            &nbsp;
            &nbsp;
            <input type="button" ng-click="submitfunction()" value="SUBMIT"></input>

        </form>

    <br><br>

    <span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span><span id="tab"></span>
    <c:url value="/L1OutputDisplayPage?gcmmLink2=true" var="messageUrl2" />
    Click <a href="${messageUrl2}" style="color:yellow" onclick="doSomething('displayContent','/LDODashBoard/L1OutputDisplayPage?','gcmmLink2=true');return false;"> Here</a>
     to Close

    </div>
</body>
</html>

PingServerPage

 angular.module("myApp", ['angular.filter'])
      .controller("myCtrl", function ($scope,$http,$compile)
      {
           $scope.serverListArray = [{COUNT:0,SERVER:"NO SELECTION"}];
           $scope.count = 0;

        $scope.addServerName = function() {
            //window.alert("$scope.serverName:" + $scope.serverName);
            //window.alert("length of array:" + $scope.serverListArray.length);

            //this is to remove the first element which is dummy

            /**
            if ($scope.serverListArray.length == 1 && $scope.count == 0) {
                //$scope.serverNameList.splice($serverNameList.COUNT, 1);
                 $scope.serverListArray.splice(searchpart($scope.serverListArray,""), 1);
            }
            **/
            $scope.serverListArray.push({COUNT:$scope.count,SERVER:$scope.serverName});
            $scope.count = $scope.count + 1;

            //reset to the empty value in the text box
            $scope.serverName = "";
        };

        $scope.reset = function() {

           $scope.serverName = "";
           $scope.serverListArray =  [];
           $scope.count = 0;
        };

        $scope.remove = function(arr) {

           //$scope.serverName = "";
           //$scope.serverListArray =  [];
            window.alert("INSIDE REMOVE2");
            window.alert("serverNameList:" + arr.length);


             for (var val = 0, len = arr.length; val < len; val += 1) {
                 window.alert(arr[val].COUNT);
                 var removeIndex = searchpart($scope.serverListArray,arr[val].SERVER);
                 $scope.serverListArray.splice(removeIndex, 1);
             }

             //set selection index to first element
             window.alert("before set.")
             $scope.serverNameList = {COUNT: 0};
             window.alert("after set set.")

         };


         function searchpart(arr,serverTmp) {
             for (var d = 0, len = arr.length; d < len; d += 1) {

                 if( arr[d].SERVER.toLowerCase().indexOf(serverTmp) >= 0 ) {
                     window.alert("return:"+ d);
                     return d;
                 }
             }
         }


      });

Answer 1

您的代码存在一些问题：

searchpart 功能无效。
删除元素后，初始化第一个值无效。

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.indexValue = "2";
    $scope.serverListArray = [{
      COUNT: 0,
      SERVER: "NO SELECTION"
    }, {
      COUNT: 1,
      SERVER: "First"
    }, {
      COUNT: 2,
      SERVER: "Second"
    }, {
      COUNT: 2,
      SERVER: "Third"
    }];
    $scope.remove = function(arr) {


      for (var val = 0, len = arr.length; val < len; val += 1) {
        var removeIndex = searchpart($scope.serverListArray, arr[val].SERVER);
        console.log(removeIndex);
        $scope.serverListArray.splice(removeIndex, 1);
      }
      $scope.serverNameList = [$scope.serverListArray[0]];
    };

    function searchpart(arr, serverTmp) {
      for (var d = 0, len = arr.length; d < len; d += 1) {
        if (arr[d].SERVER.toLowerCase().indexOf(serverTmp.toLowerCase()) >= 0) {
          return d;
        }
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <select name="serverNameList" id="serverNameList" data-ng-model="serverNameList" data-ng-options="server.SERVER for server in serverListArray" multiple data-ng-multiple="true">
    </select>

    <input type="button" ng-click="remove(serverNameList)" value="Remove" />
    <div>

      Selected: <pre>{{serverNameList|json}}</pre>
    </div>

  </div>
</div>

选择mutiple类型的列表框无法将selectidex设置为零或第一个元素

1 个答案: