Блог

У меня есть выпадающие значения $scope.role , оттуда я могу выбрать и удалить соответствующее значение из этого выпадающего списка и переместить значения в $scope.multiRoles массив. Которые я также отображаю в виде тегов.Который можно найти в AddRole()

Теперь, когда я нажимаю кнопку закрытия в теге, я вызываю removeRoles() , где я объединяю выбранный мной массив. Но мне нужно соединить их и переместить обратно $scope.role . До удаления значения он работает нормально, но я $scope.role также не могу переместить его обратно. Мне нужно, чтобы остался хотя бы один тег, я не могу удалить их все.

HTML:

 <div class="row newRow">
  <div class="form-group fields col-sm-2 col-xs-4">
    <label>ROLE *</label>
    <select name="role" class="form-control1 drop2" required ng-model="model.role" placeholder="select">
      <option value='' disabled selected>Select</option>
      <option ng-repeat="item in role track by $index" value="{{item}}">{{item}}</option>
    </select>
  </div>
  <div class="form-group  col-sm-2 col-xs-4">
    <button ng-click="AddRole($index)">Click to Add your Role</button>
  </div>
</div>
<div ng-if="rolesAdded" class="col-sm-12 col-xs-12">
  <span class="tag label tagStyle newStyling" alue="data" ng-repeat="data in multiRoles track by $index">
    <span>{{data}}</span>
  <a><i ng-click="removeSelection()"class="remove glyphicon glyphicon-remove-sign "></i></a>
  </span>
</div>
  

JS:

 $scope.AddRole = function(index) {
  debugger;
  if ($scope.model.role !== undefined) {
    $scope.multiRoles.push($scope.model.role);
    var index = $scope.role.indexOf($scope.model.role); //just find the right index which is the selected option in dropdown.
    $scope.role.splice(index, 1);
    console.log($scope.role);
    $scope.model.role = $scope.role[0];
  }
  $scope.rolesAdded = true;
};

$scope.removeRoles = function(index) {
  debugger;
  if ($scope.multiRoles !== null) {
    $scope.multiRoles.splice(index, 1);

  }
};
  

В вашем HTML-импорте data в вашу removeRoles(data) функцию:

 <button ng-click="removeRoles(data)">
  <i class="remove glyphicon glyphicon-remove-sign"></i>
</button>
  

В вашем контроллере:

 $scope.removeSelection = function(data) {
  $scope.multiRoles.splice($scope.multiRoles.indexOf(data), 1);
  $scope.role.push(data);
  $scope.rolesAdded = $scope.multiRoles.length === 0 ? false : true;
};
  

Код здесь. Надеюсь, это поможет.