I am currently utilizing AngularJS to develop a web application. If you would like to view the complete code, you can access it through this link (sample with b.0001.html). AngularJS example
My question is how can I retrieve the value ($scope.confirmed in $scope.change function) in the controller when a user selects data from a form? The issue arises when I try to work with separate files rather than everything being contained within one file, especially when including another file with a form using routing in AngularJS.
The form that I'm including in the main file utilizes the routing mechanism as shown below:
<select ng-model="confirmed" ng-change="change()" id="ng-change-example1">
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<input type="checkbox" ng-model="confirmed" id="ng-change-example2"/>
<label for="ng-change-example2">Confirmed</label><br/>
<tt>debug = {{confirmed}}</tt><br/>
<tt>counter = {{counter}}</tt><br/>
<tt>onchange_var_url = {{myurl}}</tt><br/>
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
The myurl variable should capture the value from the user's selected option, but it's not working as expected. Below is the controller for reference:
angular.module('changeExample', [])
.controller('ExampleController', ['$scope','$http', function($scope,$http) {
$scope.counter = 0;
$scope.myurl = 'result from confirmed on change on load: ' + $scope.confirmed;
$scope.change = function() {
$scope.counter++;
$scope.myurl = 'result from confirmed on change: ' + $scope.confirmed;
$http.get("angularjs-data/json-data-0001.json?var=" + $scope.confirmed)
.success(function (response) {
$scope.names = response.records;
});
};
}]);