ثبت داده در DropDownList با استفاده از AngularJS
یکشنبه 9 خرداد 1395در این مقاله نحوه ثبت و بایند(bind) داده ها در DropDownList با استفاده از AngularJS را مرحله به مرحله ، توضیح خواهیم داد .
مراحل ایجاد پروژه
یک وب سایت جدید به نام MyFirstAngularJsApp ایجاد کنید.
سپس یک web page به برنامه Add کنید.
web form را انتخاب کنید.
مانند تصویر نام آن را Default.aspx میگذاریم.
در اینجا یک فایل اسکریپت AngularJS دانلود شده را مانند زیر اضافه میکنیم.
<script src="script/angular.min.js"></script>
یا میتوانید از online script مانند زیر استفاده کنید.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
سپس یک ماژول ایجاد میکنیم.
var app = angular.module('MyFirstApp', [])
نام ماژول را MyFirstApp قرار میدهیم و در کنترلر توسط ماژول داده ها را ثبت میکنیم.
app.controller('FruiteNameBindcontrol', function($scope)
{
$scope.Color = [
{
id: '1',
name: 'Apple'
}, {
id: '2',
name: 'Guava'
}, {
id: '3',
name: 'Papaya'
}, {
id: '4',
name: 'Orange'
}, {
id: '5',
name: 'Strawberry'
}, {
id: '6',
name: 'Watermelon'
}];
});
اسکریپت پایانی را تولید میکنیم.
<script src="script/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyFirstApp', []);
app.controller('ColorNameBindcontrol', function ($scope) {
$scope.Color = [{
id: '1',
name: 'قرمز'
}, {
id: '2',
name: 'زرد'
}, {
id: '3',
name: 'سبز'
}, {
id: '4',
name: 'سفید'
}, {
id: '5',
name: 'آبی'
}, {
id: '6',
name: 'سیاه'
}];
});
</script>
پس از آن کنترلر را در تگ body اعلام میکنیم .مانند:
متد 1 :
<body data-ng-app="MyFirstApp" data-ng-controller="ColorNamecontrol">
در اینجا میتوانید data-ng-app="MyFirstApp" را در تگ Html تعریف کنیم.سپس نام رنگ را در dropdownlist اتصال دهیم.
<option data-ng-repeat="t in Color" value="{{t.id}}">{{t.name}}
در اینجا از data-ng-repeat برای ثبت در dropdownlist استفاده کرده ایم.
تمامی کدهای Body در زیر آورده شده:
<body data-ng-app="MyFirstApp" data-ng-controller="ColorNameBindcontrol" dir="rtl">
<form id="Form">
<div>
<asp:Label ID="lbltxt" Text="برنامه Angular " runat="server" Font-Bold="true"></asp:Label><br />
<b></b>
<br/>
</div>
<div>
</div>
<div align="right">
رنگ را انتخاب کنید:
<%--First Method--%>
<select>
<option data-ng-repeat="t in Color" value="{{t.id}}">{{t.name}}</option>
</select>
<%--Second Method--%>
<%--<select data-ng-options="s.id as s.name for s in Color" data-ng-model="col"></select>--%>
</div>
</form>
</body>
تصویری از تمامی کدها :
متد 2:
همچنین میتوانیم برای ثبت داده در dropdownlist از statement داده شده در زیر استفاده کنیم.
<select data-ng-options="s.id as s.name for s in Color" data-ng-model="col">
خروجی:
آموزش angular
- AngularJs
- 1k بازدید
- 3 تشکر