angularjs - select list box of type mutiple unable to set selectidex to zero or first element -
i using simple angular js select listbox multiple selection, used add elements select clicking add button, dynamically add server name in listbox, select multiple type, can multi select , remove item clicking on remove button.
the problem cannot set selected index 0 or first element upon removing items... cannot able select items after that..
in simple after remove elements need set selected index "no selection" or first element.
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 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> <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> 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 remove first element 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 empty value in 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); (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 first element window.alert("before set.") $scope.servernamelist = {count: 0}; window.alert("after set set.") }; function searchpart(arr,servertmp) { (var d = 0, len = arr.length; d < len; d += 1) { if( arr[d].server.tolowercase().indexof(servertmp) >= 0 ) { window.alert("return:"+ d); return d; } } } });
you have few problems code:
- the function searchpart not work correctly.
- initialize first value after removal of elements not working properly.
live example on 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) { (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) { (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 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>
Comments
Post a Comment