Got a questions regarding the select option value, i can get the value as the select options changed, but i am not able to get the value of the select options thru the search button, it will just give a value undefined. So where is the problem?
index.html
<div ng-controller="MatIncListCtrl">
<button class="fluid labeled icon blue ui button top attached"><i class="ellipsis vertical icon"></i>Toggle Filters Pane</button>
<div class="ui attached segment" uib-collapse="isCollapsed">
<form role="form" class="ui form">
<div class="fields">
<div class="twelve wide field" ng-controller="DistinctSupplierCtrl">
<label>Supplier</label>
<select ng-model="Supplier" class="ui fluid dropdown" ng-options="x.supp_no as x.supp for x in data" ng-change="selectAction()">
<option></option>
</select>
</div>
</div>
</form>
<br />
<button type="button" class="ui orange fluid labeled icon button" tabindex="0" ng-click="FindMatInc()"><i class="search icon"></i>Search</button>
</div>
</div>
controller.js
.controller('DistinctSupplierCtrl', function($scope, $http) {
$scope.selectAction = function() {
console.log($scope.Supplier);
};
var xhr = $http({
method: 'post',
url: 'http://localhost/api/list-distinct-supp.php'
});
xhr.success(function(data){
$scope.data = data.data;
});
})
.controller('MatIncListCtrl', function ($scope, $http) {
$scope.FindMatInc = function (){
console.log($scope.Supplier);
}
});
If you want to access a value from a scope, you've got to make sure it's in that scope or in the scope of it's ancestors. Now your ng-model is declared in the child scope. If you want to access it from the parent scope, you'll need to declare it in the parent scope. That way when the model get changed, it changed in the parent scope and thus accessible in both scopes:
Working example:
angular.module('App', []);
angular.module('App').controller('ControllerParent', [
'$scope',
function ($scope) {
// Model value declared in parent scope
$scope.selected = {};
}
]);
angular.module('App').controller('ControllerChild', [
'$scope',
function ($scope) {
$scope.options = [{
id: 1,
name: 'Alpha'
}, {
id: 2,
name: 'Bravo'
}, {
id: 3,
name: 'Charlie'
}, {
id: 4,
name: 'Delta'
}];
}
]);<!DOCTYPE html>
<html ng-app="App">
<head>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
</head>
<body ng-controller="ControllerParent">
<div ng-controller="ControllerChild">
<select ng-model="selected.value" ng-options="option.name for option in options"></select>
ControllerSub: {{selected}}
</div>
ControllerMain: {{selected}}
</body>
</html>Failing example:
angular.module('App', []);
angular.module('App').controller('ControllerParent', [
'$scope',
function ($scope) {}
]);
angular.module('App').controller('ControllerChild', [
'$scope',
function ($scope) {
// Model value declared in child scope
$scope.selected = {};
$scope.options = [{
id: 1,
name: 'Alpha'
}, {
id: 2,
name: 'Bravo'
}, {
id: 3,
name: 'Charlie'
}, {
id: 4,
name: 'Delta'
}];
}
]);<!DOCTYPE html>
<html ng-app="App">
<head>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
</head>
<body ng-controller="ControllerParent">
<div ng-controller="ControllerChild">
<select ng-model="selected.value" ng-options="option.name for option in options"></select>
ControllerSub: {{selected}}
</div>
ControllerMain: {{selected}}
</body>
</html>Descendant scopes have access to the values of their ancestors. Ancestors don't have access to values of their descendants.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments