AngularJS选择标记验证

我在这里失去了一些东西很简单，我在我的控制器的阵列如下AngularJS选择标记验证

$scope.roles = [ 
     {id: 0, label: 'Choose a Role'}, 
     {id: 1, label: 'Administrator'}, 
     {id: 2, label: 'Super User'} 
    ];

而以下是我在视图中选择标签

<select ng-options="role.id as role.label for role in roles" ng-model="myForm.role" ng-required="true"> 
</select>

哪有我验证用户是否选择了Administrator或Super User而不是Choose a Role？

来源

2015-10-27 user3052526

我添加了一个小提琴我的回答让您可以有一个工作的例子。请让我知道它是否符合您的需求。 – IggY

EDIT2：https://jsfiddle.net/3kL9rmp8/

编辑：我给你做一个小提琴：https://jsfiddle.net/fgpg9zvn/

你可以这样添加一个选项：

<select ng-options="role.id as role.label for role in roles" 
     ng-model="myForm.role" 
     ng-required="true"> 
     <option value="" disabled selected style="display: none;"> Chose a role </option> 
</select>

来源

2015-10-27 10:28:51 IggY

其实它几乎在那里，除了选择一个角色的值必须是'0'，我也必须将表单设置为无效 – user3052526

@ user3052526看看我的Edit2小提琴 - >如果没有，则表单被设置为无效值被选择（请参阅消息），但我不明白为什么您要“选择角色”消息具有值，因为选择此值时无法提交表单？ – IggY

它从后端api悲伤的要求。现在看看 – user3052526

从HTML，你可以使用：

<div ng-if="myForm.role == 'Chose a role"> 
Your code when 'Chose a role; 
</div>

JS：

if ($scope.myForm.role == 'Chose a role) { 
    Your code here 
}

来源

2015-10-27 10:25:41 uksz

但是，在这种情况下'myForm'将如何失效？ – user3052526

试试这个简洁明了的解决方案。使用此HTML有选择元素。

HTML：

<select ng-model="myForm.role" 
     ng-options="role.id as role.label for role in roles" 
     ng-change="fillTheDDL(role.id, role.label)"> 

    <option value="">Chose a role</option> 

</select>

使用此JS来获得所需的功能。

JS：

$scope.fillTheDDL= function (ID, Label) { 
    if (Label != "Choose a Role") { 
    // Your favorite code here  
    } 
    else { 
     // You don't wanna use it 
    } 
};

来源

2015-10-27 10:39:57

AngularJS选择标记验证

回答

相关问题