15 - ng-model & scope - An important point to realize - helloAngular18.html
<!-- http://www.w3schools.com/angular/angular_application.asp -->
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
<p>Write in the input field to add items.</p>
</body>
</html>
Bu örnekte fark etmemizi istediğim çok önemli bir nokta var. Script tag'ları arasındaki şu satıra dikkat edelim :
$scope.products.push($scope.addMe);
Controller'ın scope'unda addMe diye bir variable doğrudan tanımlanmamıştır. Ancak bu controller'u seçtiğimiz div tag'ları arasında <input ng-model="addMe"> diyerek aslında bu scope'da sessiiiz ve sakiiince gözlerden uzak bir şekilde controller'ımızın olduğu scope'da addMe diye bir variable tanımlamış olduk. Bu variable'a controller fonksiyonda $scope.addMe diyerek eriştik. Buradan anladığımız diğer bir nokta kod içinde belirli bir sıra yoktur aslında, view'de tanımlanan bir variable'a controller fonksiyonda erişilebilir, veya controller fonksiyonda tanımlanan bir variable'a view'de erişilebilir.
15 - Angular.js - Select Boxes - ng-options
( http://www.w3schools.com/angular/angular_select.asp )
AngularJS lets you create dropdown lists based on items in an array, or an object.
( Bir array'deki veya bir object'deki item'lara göre dropdown listesi yaratmak Angular.js ile çok kolaydır. Drop-down listesi yani select box oluşturmak için ng-repeat veya ng-options kullanılabilir. Ancak ng-options kullanmak çok daha avantajlı ve pratiktir. )
Select box'lar ng-repeat ile veya ng-options ile oluşturulabilir.
Creating a Select Box Using ng-options
If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options directive:
Because the ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage: Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string. ( ng-repeat directive, bir array'deki herbir item için, bir HTML code block'u generate eder. Dolayısıyla bu directive kullanılarak bir dropdown listesindeki options'lar oluşturulabilir. Ancak ng-repeat directive ile object kullanılamaz, sadece string array kullanılabilir. ng-options ile ise array of object kullanılabilir.)
When the selected value can be an object, it can hold more information, and your application can be more flexible.
16 - ng-options="x for (x, y) in cars" - Bir object'in variable'ları üzerinde gezip bu variable'ları dropdown list'de göstermek
In the previous examples the data source was an array, but we can also use an object. Önceki örneklerde, dropdown list oluşturmak için kullandığımız data source bir array'di. Aşağıdaki örneklerde ise dropdown list oluşturmak için kullandığımız data source object'dir. Object'lerin sahip oldukları property'lerin üzerinde gezerek, dropdown list'de kullanıcıya x'i yani variable ismini gösterebiliriz veya variable'ın değeri de bir object ise variable'ın değeri olan object'in sahip olduğu bir variable'ın değerini gösterebiliriz. Ancak her halükarda, dropdown-list'deki seçilen variable'ın değeri yani y, ng-model ile gösterilen variable'a assign edilir.
Bu örnekte cars object'inin sahip olduğu variable'ların değeri string'dir.
Bu örnekte ve data source'u object olan tüm dropdown list örneklerinde, selectedCar variable'ına bind edilen(assign edilen) değer y'dir(The selected value will always be the value in a key-value pair.)
Bu örnekte dropdown list'de kullanıcıya gösterilen değerler, x yani cars object'indeki variable'lardır.
The value in a key-value pair can also be an object(Aşağıdaki örneklerde cars object'inin sahip olduğu variable'ların değeri object'dir. Bu da mümkündür. Aşağıdaki ilk örnekte dropdown list'de car01 seçersek, car01'in değeri olan object'i selectedCar variable'ına assign ederiz. 2. örnek ise daha mantıklıdır, örneğin listeden Fiat seçince car02'nin değeri olan object'e yani bu araba hakkındaki tüm bilgilere erişebiliriz.)
Bu örnekte ve data source'u object olan tüm dropdown list örneklerinde, selectedCar variable'ına bind edilen(assign edilen) değer y'dir.
Bu 2 örnekte dropdown list'de kullanıcıya gösterilen değerler sırasıyla x yani cars object'indeki variable'lar ve y.brand yani seçilen variable'ın değeri olan object'in brand isimli variable'ının değeridir. Dropdown list'de kullanıcıya gösterilen değer x, y , y.variableName olabilir(The options in the dropdown list does not have be the key in a key-value pair, it can also be the value, or a property of the value object)
No comments:
Post a Comment