Membuat Dinamis Select Option Dengan AngularJS Pada PHP

Dinamis Select Option adalah sebuah dropdown list yang terdapat pada sebuah form berisi option-option berkaitan. Yang dimaksud berkaitan yaitu dikala dipilih bagian parent karenanya option berikutnya akan menampilkan data yang berhubungan dengan parentnya. Selaku contoh kita memilih sebuah category karenanya akan menampilkan data sub category.

Pada kasus kali ini kita akan membangun dinamis select option menggunakan AngularJS. Agar tak terlalu lama mari seketika saja dimulai membuatnya yuk ikuti strategi berikuti ini:

Langkah pertama-tama:

Rekan rekan bikin database baru kemudian bikin 2 tabel seperti tampilan berikut ini

Bagi isi di setiap tabel dapat diganti sesuai keinginan sobat, yang terpenting ialah di tabel subcategory ada sebuah field category_id karena mesti sesuai dengan id di table category.

Langkah kedua bikin file html beri nama index.html:

<!DOCTYPE html><br />
 <html><br />
      <head><br />
           <title>Merancang Dynamis Select Option Menggunakan AngularJS Di PHP</title><br />
           <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js”></script><br />
           <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” /><br />
      </head><br />
      <body><br />
           <div class=”container pt-5″><br />
             <div class=”row”><br />
               <div class=”col-md-6 offset-md-3″> </p>
<p>                    <h4 class=”text-center py-3″>Merancang Dynamis Select Option Menggunakan AngularJS</h4><br />
                    <div ng-app=”myapp” ng-controller=”usercontroller” ng-init=”loadCategory()”><br />
                         <select name=”category” ng-model=”category” class=”form-control” ng-change=”loadSub_category()”><br />
                              <option value=””>Select Category</option><br />
                              <option ng-repeat=”category in categorys” value=”{{category.category_id}}”>{{category.category_name}}</option><br />
                         </select><br />
                         <br /><br />
                         <select name=”sub_category” ng-model=”sub_category” class=”form-control”><br />
                              <option value=””>Select Sub Category</option><br />
                              <option ng-repeat=”sub_category in sub_categorys” value=”{{sub_category.subcategory_id}}”><br />
                                   {{sub_category.subcategory_name}}<br />
                              </option><br />
                         </select><br />
                    </div><br />
               </div><br />
             </div><br />
           </div><br />
      </body><br />
 </html>

<!DOCTYPE html>

<html>

<head>

<title>Merancang Dynamis Select Option Menggunakan AngularJS Di PHP</title>

</head>

<body>

<h4 class=“text-center py-3”>Merancang Dynamis Select Option Menggunakan AngularJS</h4>

<option value=“”>Select Category</option>

<option ng–repeat=“category in categorys” value=“{{category.category_id}}”>{{category.category_name}}</option>

</select>

<br />

<option value=“”>Select Sub Category</option>

</option>

</select>

</div>

</body>

</html>

ng-app = myapp (bagi memulai program dengan nama myapp)
ng-init = loadCategory & loadSub_categoryÂ (bagi inisialisasi data yang berada di program)
ng-repeat = category in categorys, dll (bagi perulanggan dari unsur HTML bagi setiap item pada array)
bagi value dari ng-app, ng-init, ng-repeat dapat diganti namanya jadi tak mesti seperti yang saya tulis.

Langkah ketiga:

Kini tambhakan sebuah script javascript seperti code dibawah ini:

<script><br />
 var app = angular.module(“myapp”,[]);<br />
 app.controller(“usercontroller”, function($scope, $http){<br />
      $scope.loadCategory = function(){<br />
           $http.get(“category.php”)<br />
           .success(function(data){<br />
                $scope.categorys = data;<br />
           })<br />
      }<br />
      $scope.loadSub_category = function(){<br />
           $http.post(“sub_category.php”, {‘category_id’:$scope.category})<br />
           .success(function(data){<br />
                $scope.sub_categorys = data;<br />
           });<br />
      }<br />
 });<br />
 </script>

var app = angular.module(“myapp”,[]);

app.controller(“usercontroller”, function($scope, $http){

$scope.loadCategory = function(){

$http.get(“category.php”)

.success(function(data){

$scope.categorys = data;

})

(Visited 7 times, 1 visits today)

Leave a Reply Cancel reply