简体   繁体   English

从列表中删除项目时,如何在选择框中设置默认选项-angularjs

[英]How can I set the default option in select box when an item was removed from the list - angularjs

I have an angularjs controller and html view which shows a list of employee names and if they are a supervisor or not and lastly a list of supervisors to choose from. 我有一个angularjs控制器和html视图,其中显示了雇员姓名列表,以及他们是否是主管,最后是可供选择的主管列表。 There will always be at least one default supervisor in the list, which in this case is Sally. 列表中将始终至少有一位默认主管,在这种情况下为Sally。

The supervisor dropdown can change according the "Is Supervisor?" 主管下拉菜单可以根据“主管”来更改。 selection. 选择。 If the employee is set to be a supervisor their name will appear in the dropdown. 如果将员工设置为主管,则其姓名将显示在下拉列表中。 If the employee is set not to be a supervisor, their name will be dropped from the supervisor list and subsequently the dropdown also. 如果将员工设置为不是主管,则其姓名将从主管列表中删除,然后也从下拉列表中删除。

In this example we have the default supervisor, Sally and one other employee, Tom, is also marked as a supervisor. 在此示例中,我们有默认主管Sally,另外一名雇员Tom也被标记为主管。

Lets change the supervisor of Harry to that of Tom. 让我们将哈里的主管换成汤姆。

Now if I change Tom to not be a supervisor anymore, I expect the supervisor dropdown for Harry to be changed to the default supervisor, Sally. 现在,如果我将Tom不再担任主管,我希望Harry的主管下拉菜单将更改为默认主管Sally。 But instead, a "blank" option appears in the drop down next to Harry instead. 但是,相反,在Harry旁边的下拉列表中出现了一个“空白”选项。

And that is the problem, does anyone have any suggestion on how to fix this? 这就是问题所在,有人对如何解决此问题有任何建议吗?

You can find the code at https://jsfiddle.net/w7gy6hn3/ 您可以在https://jsfiddle.net/w7gy6hn3/找到代码

<select ng-init="defaultSupervisorId = responsiblePerson.id"
    ng-model="defaultSupervisorId" 
    ng-options="supervisor.id as (supervisor.name + ' ' + supervisor.id) for supervisor in supervisorList">
</select>

here is the updated fiddle https://jsfiddle.net/55uk6m8L/ just add the below extra code to your controller 这是更新的小提琴https://jsfiddle.net/55uk6m8L/只需将以下额外的代码添加到您的控制器

$scope.updateDropDown = function(employee) {

 for(var i=0;i<$scope.employees.length;i++)
 {
   if($scope.employees[i] != employee && $scope.employees[i].defaultSupervisorId == employee.id )
   {

     $scope.employees[i].defaultSupervisorId = $scope.supervisorList[0].id;
   }
 }

  };

call this function in your in $scope.updateSupervisorList functions inside else block after splice method 在splice方法之后在else块中的$ scope.updateSupervisorList函数中调用此函数

 $scope.updateDropDown(employee);

and also in html , i change the these lines 而且在html中,我更改了这些行

<select ng-init="employeeInfo.defaultSupervisorId = responsiblePerson.id"
                            ng-model="employeeInfo.defaultSupervisorId" 
                            ng-options="supervisor.id as (supervisor.name + ' ' + supervisor.id) for supervisor in supervisorList">
                    </select>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从AngularJS的下拉框中设置选择默认值? - How can I set a select default value from a drop-down box in AngularJS? 如何为AngularJS设置select的默认选项? - How do I set the default option for select with AngularJS? 如何在angularjs中设置选择框的默认值 - How do I set default value of select box in angularjs 没有在列表-jquery中选择任何值时,如何在自动完成文本框中将第一个值设置为默认值? - How can I set the first value as default in autocomplete text box when did not select any value in list - jquery? 在选择框中选择默认选项-AngularJs - Select default option in select box - AngularJs ng-Select Option如果使用angularJS匹配值,则从列表中设置默认值 - ng-Select Option set default value from list if value match using angularJS 只有当我点击选择框时,如何从数据库中获取刷新的选项值? - How can get the refreshed option values from database only when i click on select box? 在AngularJS中更改另一个选择选项的值时,如何更改选择选项的值? - How can I change a select option value when I change the value of another select option in AngularJS? 当我选择一个选项时,angularjs选项列表将变为空 - angularjs option list becoms empty when i select an option 如何使用AngularJS在选择字段中将预选选项设置为默认选项 - How to set a preselected option as default in a select field using AngularJS
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM