AngularJS – Dinamik Değişken

Merhaba arkadaşlar
Bildiğiniz gibi AngularJS de html ile js dosyası arasındaki bağı scope ile sağlıyorduk. Yani controller üzerinde tanımladığımız bır scope nesnesini html üzerinde {{}} veya ng-bind ile çağırabiliyoruz. Bahsettiğimiz değişkenler sabit tanımlanıp görüntülenenler. Bir de JS tarafında tanımlayabildiğimiz değişkenler var ki bu yazımızın konusuda budur zaten 🙂

Hemen HTML kodlarımızı yerlestirelim

<!DOCTYPE html>
<html lang="en" ng-app="MezoBlogSample">
<head>
    <script src="lib/angular.min.js"></script>
    <script src="filterSearchSample/controller/SampleCtrl.js"></script>
    <meta charset="UTF-8">
    <title>Mezo Blog</title>
</head>
<body ng-app>
<div ng-controller="SampleController">
    <input type="text" ng-model="search"/>
    <br/>
<ul>
    <li ng-repeat="company in companyList | filter:search ">
        {{company.CompanyName}}
        <br/>
        {{dynamicVariable[company.CompanyID]}}
    </li>
</ul>
</div>
</body>
</html>
									

ve Controller kodlarımız

var app = angular.module("MezoBlogSample",[]);
    app.controller("SampleController" ,["$scope", function($scope ){
        var json = {
            "companies": [{
                "CompanyID": "1",
                "CompanyName": "abc Company"
            }, {
                "CompanyID": "2",
                "CompanyName": "123 Company"
            }, {
                "CompanyID": "3",
                "CompanyName": "xyz Company"
            }]
        };
        $scope.companyList =[];
        $scope.dynamicVariable = {};
        angular.forEach(json.companies , function(item){
            $scope.dynamicVariable[item.CompanyID] = item.CompanyID +"id li sirket icin uretilmis Dinamik degisken"
            $scope.companyList.push(item);
        });

    }]);

									

Burada tanımladığımız $scope.dynamicVariable = {}; objemiz içersine istenilen miktarda değişken tanımlanabilir ve HTML tarafından da {{dynamicVariable[company.CompanyID]}} şeklinde kullanabiliyoruz.

ve AngularJS ile dinamik değişkenimiz hayırlı olsun 🙂 Bu da ornegimiz.

Umarım Yararlı Olur
Bilgiyle Kalın
M.Zeki OSMANCIK

Leave a Reply

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box