Как удалить / очистить переменную области при ng-change

0

У меня есть выпадающий список с обработчиком событий ng-change:

            <label>Person:</label>
            <select class="form-control" ng-model="select" ng-change="change()">
              <option value="0">a </option>
              <option value="1">b </option>
              <option value="2">c </option>
            </select>

При изменении я назначаю данные из массива в $ scope.person:

  $scope.change = function(){
        $scope.person = $scope.persons[$scope.select]; 
 };

Массив:

  $scope.persons = [
       {'name': 'Peter'},
       {'name': 'John'},
       {'name': 'Mark'}
];

Когда человек выбран (например, $ scope.select == 0/Peter), есть возможность добавить значение этому человеку ($ scope.person.value) с помощью переключателей:

<label><input type="radio" ng-model="person.value"  value="1"> Value 1 </label><br/>
<label><input type="radio" ng-model="person.value"  value="2"> Value 2</label><br/>
<label><input type="radio" ng-model="person.value"  value="3"> Value 3</label><br/>

Когда значение ($ scope.person.value) добавляется к человеку, и я изменяю раскрывающийся список, я хочу удалить/очистить это значение. Таким образом, когда вы повторно выбираете этого человека в раскрывающемся списке $ scope.person.value, не определено.

  $scope.change = function(){
    //This is not working
   delete $scope.person;
   // This is not working either
    $scope.person.value = '';

    $scope.person = $scope.persons[$scope.select]; 

 };

Я хочу знать, как очистить значение, хранящееся в $ scope.person.value, при изменении выпадающего списка. Теперь переменная по-прежнему определяется, когда я повторно выбираю человека. Вот рабочий пример.

  • 0
    Вы должны работать с ng-value а не только со value См. Docs.angularjs.org/api/ng/input/input%5Bradio%5D
  • 0
    вы можете console.log $ scope.select? он меняется при выборе выпадающих списков?
Показать ещё 3 комментария
Теги:
angularjs-scope

3 ответа

0

Я думаю, что переменная все еще сохраняется, вы должны удалить ее самостоятельно:

$scope.change = function(){
        delete $scope.person;
        $scope.person = '';             
        $scope.person = $scope.persons[$scope.select];
        //Remove the assigned value
        delete $scope.person.value;
};
  • 0
    Большое спасибо! Это делает работу :-)
  • 0
    Можете ли вы проверить мой ответ как выбранный ответ?
0

Как говорит @Kevin Sanchez, вам нужно удалить value от человека.

Подобно этому delete $scope.person.value;

Живой пример на jsfiddle.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {



  $scope.persons = [{
    'name': 'Peter'
  }, {
    'name': 'John'
  }, {
    'name': 'Mark'
  }];

  $scope.change = function() {
    if ($scope.person)
      delete $scope.person.value;

    $scope.person = $scope.persons[$scope.select];
  };


}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">

    <label>Person:</label>
    <select class="form-control" ng-model="select" ng-change="change()">
      <option value="0">a</option>
      <option value="1">b</option>
      <option value="2">c</option>
    </select>

    <br>
    <br>{{ person }}
    <br>
    <br>
    <label>
      <input type="radio" ng-model="person.value" value="1">Option 1</label>
    <br/>
    <label>
      <input type="radio" ng-model="person.value" value="2">Option 2</label>
    <br/>
    <label>
      <input type="radio" ng-model="person.value" value="3">Option 3</label>
    <br/>


  </div>
</div>
0

ваша проблема здесь,

$scope.person = $scope.persons[$scope.select];

когда вы это сделаете, а затем назначьте свойство "значение", вы фактически модифицируете объект в массиве лиц. попробуйте ниже,

$scope.change = function() {
    $scope.person = angular.copy($scope.persons[$scope.select]); 
    console.log($scope.person);
  };

  $scope.$watch('person.value', function(n) {
    console.log(n);
  });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню