У меня есть выпадающий список с обработчиком событий 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, при изменении выпадающего списка. Теперь переменная по-прежнему определяется, когда я повторно выбираю человека. Вот рабочий пример.
Я думаю, что переменная все еще сохраняется, вы должны удалить ее самостоятельно:
$scope.change = function(){
delete $scope.person;
$scope.person = '';
$scope.person = $scope.persons[$scope.select];
//Remove the assigned value
delete $scope.person.value;
};
Как говорит @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>
ваша проблема здесь,
$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);
});
ng-value
а не только соvalue
См. Docs.angularjs.org/api/ng/input/input%5Bradio%5D