Select sử dụng ng-options AngularJS

• Input ngày với angularJS
• Tạo ngày chọn theo mục ngày, tuần, tháng, năm

https://www.w3schools.com/angular/angular_select.asp

Nạp dữ liệu vào options select html với angular

Ví dụ 1: nạp giá trị đơn giản options select angular

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="monhoc_chon" ng-options="x for x in monhoc">

</select>

Chọn: {{monhoc_chon}}

</div>

<script>

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

app.controller('myCtrl', function($scope) {

  $scope.monhoc = ["C++", "Angular", "HTML"];

});

</script>

 

* Cũng ví dụ trên, ta có thể nạp theo kiểu

<select>
<option ng-repeat="x in monhoc">{{x}}</option>
</select>

Ví dụ 2: nạp giá trị value và display options select angular

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">



<select ng-model="monhoc_CHON">

  <option ng-repeat="x in monhoc" value="{{x.Ma}}">{{x.Ten}}</option>

</select>

<h1>Bạn chọn môn: {{monhoc_CHON}}</h1>

</div>

<script>

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

app.controller('myCtrl', function($scope) {

 $scope.monhoc = [

  {Ten : "C++", Ma : "1"},

  {Ten : "C#", Ma : "2"},

  {Ten : "Angular", Ma : "3"}

]; 

 

});

</script>

Ví dụ 3: nạp giá trị value và display và trả về đối tượng khi chọn xong

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

** Cách 1: <br />

<select ng-model="monhoc_CHON">

  <option ng-repeat="x in monhoc" ng-value="{{x}}">{{x.Ten}}</option>

</select>

<br />** Cách 2: <br />

<select ng-model="monhoc_CHON" ng-options="x.Ten for x in monhoc">

</select>

<h1>Bạn chọn: mã: {{monhoc_CHON.Ma}}, tên: {{monhoc_CHON.Ten}}</h1>

</div>

<script>

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

app.controller('myCtrl', function($scope) {

 $scope.monhoc = [

  {Ten : "C++", Ma : "1"},

  {Ten : "C#", Ma : "2"},

  {Ten : "Angular", Ma : "3"}

]; 

});

</script>