带有多个模型的下拉菜单答案

【问题标题】：Dropdown with multiple models带有多个模型的下拉菜单
【发布时间】：2014-10-25 07:04:09
【问题描述】：

我无法确定如何根据多个模型属性在下拉列表中选择适当的值。我正在尝试使用 3 个选项实现下拉菜单：Present, Absent, Make-up。

关键是，缺席属性存储一个人是否缺席（true/false），而化妆属性存储是否是化妆（即用户正在补课，所以他是absent: false和makeup: true。例如，假设我有以下模型：

users : {
  1 : {
    absent: true
    makeup: false
  },
  2 : {
    absent: false
    makeup: true
  }
}

然后是带有以下选项的下拉菜单：

options : {
   false : 'Present'
   true : 'Absent'
   'makeup' : 'Make-Up'
}

我知道如何通过 ng-change 根据选择将正确的值绑定到模型。但是，我无法在下拉列表中显示初始值，因为该值取决于多个模型属性：

// options shown in full instead of ng-options for demo purposes here
<select ng-model="user.absent">
    <option value="false">Present</option>
    <option value="true">Absent</option>
    <option value="makeup">Make-up</option>
</select>

这把我逼疯了！任何帮助表示赞赏！

谢谢！

编辑：

这是我能想到的最佳解决方案。这有点难看，但它有效我仍在寻找更合适的解决方案，如果有人有的话。

<select ng-model="userAttendance.status" ng-change="changeAttendance(userAttendance)">
     <option value="false" ng-selected="userAttendance.makeup == false && userAttendance.absent == false">Present</option>
     <option value="true" ng-selected="userAttendance.absent == true">Absent</option>
     <option value="makeup" ng-selected="userAttendance.makeup == true && userAttendance.absent == false">Make-up</option>
</select>

//controller
$scope.changeAttendance = function(userAttendance) {
    if (userAttendance.status == 'makeup') {
       userAttendance.makeup = true;
       userAttendance.absent = false;
    } else {
       userAttendance.absent = userAttendance.status;
       userAttendance.makeup = false;
    }
};

【问题讨论】：

可以同时为真或都为假？
我看不到两者都成立的情况。如果用户在场并正在化妆，则缺席 = 假，化妆 = 真。如果用户缺席，则用户不能化妆，所以缺席=真，化妆=假。但是，如果用户在场但未化妆，则两者都可能为假...缺席 = 假，化妆 = 假。
那为什么你有 3 个选项 - 2 个就足够了，不是吗？
否，因为数据库将缺席/存在存储在一列中，以及是否在另一列中存储。这样就很容易看到当前用户的数量和组成的用户数量。 So when "Make-Up" is selected, it's setting the makeup attribute to true, as well as present = true(absent=false).
那很好，但是为什么你有 3 个下拉选项呢？ Looks Makeup 将始终显示为 Present（反之亦然）。

标签： angularjs

【解决方案1】：

这是我能想到的最佳解决方案。这有点难看，但它有效我仍在寻找更合适的解决方案，如果有人有的话。

<select ng-model="userAttendance.status" ng-change="changeAttendance(userAttendance)">
     <option value="false" ng-selected="userAttendance.makeup == false && userAttendance.absent == false">Present</option>
     <option value="true" ng-selected="userAttendance.absent == true">Absent</option>
     <option value="makeup" ng-selected="userAttendance.makeup == true && userAttendance.absent == false">Make-up</option>
</select>

控制器：

$scope.changeAttendance = function(userAttendance) {
    if (userAttendance.status == 'makeup') {
       userAttendance.makeup = true;
       userAttendance.absent = false;
    } else {
       userAttendance.absent = userAttendance.status;
       userAttendance.makeup = false;
    }
};

【讨论】：