كيفية تعطيل <option> لعنصر التحديد عند استخدام AngularJS ng-options؟
-
20-12-2019 - |
سؤال
هل هناك طريقة لتعطيل option
في select
عنصر عندما نسكن options
مع خيارات نانوغرام في AngularJS؟
مثله: http://www.w3schools.com/tags/att_option_disabled.asp
يمكنك القيام بذلك عن طريق إضافة ng-disabled
لكل <option>
العلامة، ولكن هل هناك طريقة للقيام بذلك إذا كنا نستخدم ng-options
التوجيه في select
بطاقة شعار؟
المحلول
إحدى الطرق للقيام بذلك هي نسيان الاستخدام ng-options
على ال select
العنصر، وإضافة الخيارات في مع ng-repeat
, ، ثم يمكنك إضافة أ ng-disabled
تحقق من كل منهما option
.
<div ng-app="myapp">
<form ng-controller="ctrl">
<select id="t1" ng-model="curval">
<option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
</select>
<button ng-click="disabled[curval]=true">disable</button>
</form>
</div>
وحدة تحكم الحد الأدنى للاختبار:
angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.options=['test1','test2','test3','test4','test5'];
$scope.disabled={};
})
نصائح أخرى
من الزاوي 1.4 :يمكننا ان نستخدم disable when
في خيارات ng، على سبيل المثال:
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
];
$scope.myColor = $scope.colors[2]; // red
يحتوي هذا المثال على ألوان مجمعة حسب الظل، مع تعطيل بعضها:
<select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"></select>
حصلت على هذا الرمز من الوثائق الزاوية.
يجب عليك استخدام ng-disabled
التوجيه http://docs.angularjs.org/api/ng.directive:ngDisabled.
<body ng-app="myApp">
<div ng-controller="myCtrl">
<form class="form-inline">
<div class="form-group">
<select class="form-control" ng-disabled="disableSelect">
<option val="one">First</option>
<option val="two">Second</option>
</select>
</div>
<button class="btn btn-default" ng-click="disableSelect = !disableSelect">
Disable select
</button>
</form>
</div>
</body>
هنا يمكنك العثور على المثال الكامل http://jsbin.com/ihOYurO/1/
حل مع الإصدار 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [تأكد مرة أخرى أنك تبحث عن وثائق الإصدار 1.4]
ربما شيء من هذا القبيل
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>