I have been looking hard for examples but could not find anything at all. The only thing I know is that I could use the http module to get my data. Here is what I am currently doing, but it's coded with Knockout. Can someone give me some advice on how I could recode this feature using AngularJS?
HTML
<select id="testAccounts" data-bind="options: testAccounts, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select Account', value: selectedTestAccount"> </select>
Javascript
<script type='text/javascript'> $(document).ready(function () { var townSelect = function () { var self = this; self.selectedTestAccount = ko.observable(); self.testAccounts = ko.observableArray(); var townViewModel = new townSelect(); ko.applyBindings(townViewModel); $.ajax({ url: '/Admin/GetTestAccounts', data: { applicationId: 3 }, type: 'GET', success: function (data) { townViewModel.testAccounts(data); } }); }); </script>
The proper way to do it is using the ng-options
directive. The HTML would look like this.
<select ng-model="selectedTestAccount" ng-options="item.Id as item.Name for item in testAccounts"> <option value="">Select Account</option> </select>
JavaScript:
angular.module('test', []).controller('DemoCtrl', function ($scope, $http) { $scope.selectedTestAccount = null; $scope.testAccounts = []; $http({ method: 'GET', url: '/Admin/GetTestAccounts', data: { applicationId: 3 } }).success(function (result) { $scope.testAccounts = result; }); });
You'll also need to ensure angular is run on your html and that your module is loaded.
<html ng-app="test"> <body ng-controller="DemoCtrl"> .... </body> </html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With