Question

当我从下拉列表中添加人员或从列表重新添加到下拉列表时，我的代码功能存在问题，而同一个人被添加2次或我删除一个人员然后又将别人会被删除，而我不确定错误/错误在哪里，也许您可以帮帮我。

HTML：

<div ng-app="miniapp">
<div ng-controller="Ctrl">
    <div ng-init="getPersons()" class="dropdown">
       <select name="selectedPerson" ng-model="selectedPerson">
          <option ng-repeat="Person in Persons">{{Person}}</option>
       </select>
       <button  ng-click="addPerson()">
          <div>
             <i class="fa fa-plus"></i>
          </div>
        </button>
    </div>
    <div class="block-form ng-scope" ng-init="initSavedPersons()">
        <ul class="pers-ul">
            <li class="pers-li" ng-repeat="person in persons | orderBy:'name'">
               <span class="fa" ng-click="getDeletedPerson($event); deletePerson($index)">&#xf00d;</span>
               <span>{{person.name}}</span>
            </li>
         </ul>
     </div>
</div>

控制器：

var $scope;
var app = angular.module("myapp", []);

app.controller("Ctrl", function($scope) {
  $scope.persons = [];
  $scope.Persons = [];
  var deletedPers = "";

  $scope.getPersons = function() {
    $scope.Persons = ["Tom", "Jerry"];
  };

  $scope.initSavedPersons = function() {
    var initPers = ["Max", "Alfi"];
    for (var i = 0; i < initPers.length; i++) {
      $scope.persons.push({ name: initPers[i] });
    }
  };

  $scope.addPerson = function() {
    var index = 0;
    $scope.persons.push({ name: $scope.selectedPerson });
    for (var i = 0; i < $scope.Persons.length; i++) {
      if ($scope.Persons[i] == $scope.selectedPersons) {
        index = i;
      }
    }

    console.log(index);
    $scope.Persons.splice(index, 1);
    $scope.Persons.sort();
  };

  $scope.getDeletedPerson = function(obj) {
    deletedPers = obj.currentTarget.nextElementSibling.innerHTML;
  };

  $scope.deletePerson = function(index) {
    $scope.persons.splice(index, 1);
    $scope.Persons.push(deletedPers);
  };
});

Answer 1

我用lodash操纵数组。请检查下面的代码；

var $scope;
var app = angular.module('myapp', []).constant('_', window._);

function Ctrl($scope) {
	$scope.persons = [];
  $scope.Persons = [];
  var deletedPers = "";
  
  	$scope.getPersons = function () {
        $scope.Persons = ["Tom", "Jerry"];
    }


    $scope.initSavedPersons = function () {
        var initPers = ["Max", "Alfi"];
        initPers.sort();
        for (var i = 0; i < initPers.length; i++) {
            $scope.persons.push({ 'name': initPers[i] });
        }
    }
  
  $scope.addPerson = function () {
        var index = 0;
        $scope.persons.push({ 'name': $scope.selectedPerson });
        var sortedArray = _.sortBy($scope.persons, ['name']);
        $scope.persons.length = 0;
        $scope.persons.push.apply($scope.persons, sortedArray);
        _.remove($scope.Persons, function(item) { return item == $scope.selectedPerson});
    }

    $scope.deletePerson = function (index) {
     		console.log(index);     		
    		var deletedPerson = Object.assign({}, $scope.persons[index]);
        _.remove($scope.persons, { 'name' : deletedPerson.name});
        
        $scope.Persons.push(deletedPerson.name);
        $scope.Persons.sort();
    }
}

.pers-ul {
        list-style: none;
        padding-left: 0;
        margin-top: 25px;
    }

    .pers-li {
        border: 1px solid black;
        display: inline-block;
        padding: 5px 10px;
        margin-right: 5px;
        margin-bottom: 5px;
        text-transform: capitalize;
    }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="Ctrl">
        <div ng-init="getPersons()" class="dropdown">
           <select name="selectedPerson" ng-model="selectedPerson">
              <option ng-repeat="Person in Persons">{{Person}}</option>
           </select>
           <button  ng-click="addPerson()">
              <div>
                 <i class="fa fa-plus"></i>
              </div>
            </button>
        </div>
        <div class="block-form ng-scope" ng-init="initSavedPersons()">
            <ul class="pers-ul">
                <li class="pers-li" ng-repeat="person in persons">
                   <span class="fa" ng-click="deletePerson($index)">&#xf00d;</span>
                   <span>{{person.name}}</span>
                </li>
             </ul>
         </div>
    </div>
</div>

Answer 2

这是您的代码，没有外部库和错误修复。更改之前，我已发表评论。

var $scope;
var app = angular.module("myapp", []);

app.controller("Ctrl", function($scope) {
  // changed the variable names so they are easy to identify. 
  $scope.addedPersons = [];
  $scope.dropDownPersons = [];
  // added it outside the function initSavedPersons
  $scope.initPers = ["Max", "Alfi"];

  $scope.getPersons = function() {
    $scope.dropDownPersons = ["Tom", "Jerry"];
  };

  $scope.initSavedPersons = function() {
    // used map function to generate array
    $scope.addedPersons = $scope.initPers.map(function(item){
        return { name: item };
    });
  };

  $scope.addPerson = function() {
    $scope.addedPersons.push({ name: $scope.selectedPerson });
    // use findIndex function 
    var index = $scope.dropDownPersons.findIndex(function(item) {
      return item == $scope.selectedPerson;
    });

    $scope.dropDownPersons.splice(index, 1);
    $scope.dropDownPersons.sort();
  };
  
  // deleted unnecessary function getDeletedPerson

  // passed the deleting object to the function
  $scope.deletePerson = function(deletingPerson) {
    
    // used findIndex again
    var index = $scope.addedPersons.findIndex(function(item) {
      return item.name == deletingPerson.name;
    });
    
    // add to dropdown 
    $scope.dropDownPersons.push(deletingPerson.name);
    $scope.addedPersons.splice(index, 1);
  };
});

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>

<body>
    <div ng-app="myapp">
        <div ng-controller="Ctrl">
            <div ng-init="getPersons()" class="dropdown">
                <select name="selectedPerson" ng-model="selectedPerson">
                    <option ng-repeat="dropDownPerson in dropDownPersons">{{dropDownPerson}}</option>
                </select>
                <button ng-click="addPerson()">
                    <div>
                        <i class="fa fa-plus"></i>
                    </div>
                </button>
            </div>
            <div class="block-form ng-scope" ng-init="initSavedPersons()">
                <ul class="pers-ul">
                    <li class="pers-li" ng-repeat="addedPerson in addedPersons | orderBy:'name'">
                        <span class="fa" ng-click="deletePerson(addedPerson)">&#xf00d;</span>
                        <span>{{addedPerson.name}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</body>

</html>

从下拉列表到列表以及从列表下拉到列表的角值

2 个答案: