javascript - ng-show 需要 'double evaluate'

Question

摘要

我想为 ng-show 使用一个需要首先评估的对象属性。

<小时/>

示例

我有一个包含 lanOption (语言)对象的数组，我想在 select 元素中显示它。是否显示语言取决于变量 couID(国家/地区)，该变量也存在于范围内。

我想通过附加属性在对象中包含有关显示或隐藏语言的逻辑，然后由 ng-show 使用，如下所示:

型号

$scope.lanOptions = [
   {name: "English", ngShow: "1"},                      
   {name: "Danish",  ngShow: "$scope.couID='DK'"},
   {name: "French",  ngShow: "$scope.couID='FR' || $scope.couID='BE'"},
   {name: "Dutch",   ngShow: "$scope.couID='NL' || $scope.couID='BE'"}
]

(应始终显示英语，仅在选择丹麦时显示丹麦语等)

查看

<select>
    <option ng-repeat="o in lanOptions" ng-show="{{o.ngShow}}" value="{{o.name}}">{{o.name}}</option>
</select>

问题

这里重要的部分是 ng-show 属性——有没有办法让它发挥作用？和/或我缺少更好的方法吗？我尝试过 filter:，但没有成功。

谢谢!

<小时/>

编辑

澄清一下:这个示例实际上非常简化为我实际想要做的事情。在我的实际问题中，还有更多变量值(可能)影响每个选项的可见性。

举个例子，考虑

{name: 'Basque', ngShow: "($scope.couID=='ES' || $scope.couID=='FR') && $scope.inclMinority==true"}

或

{name: 'German', ngShow: "$scope.couID=='DE' || 
                          $scope.couID=='AU' ||
                          ($scope.couID=='BE' && $scope.inclMinority==true)"}

，或更复杂的表达式。

这就是为什么我不只是添加一个 couID 数组作为每个语言对象的属性 - 如果我之前没有明确提及这一点，我很抱歉。

Answer 1

用 $scope. 来修复模型 @ ngShow: "$scope.couID='DK'"} 中的作用域变量名称并不是一个好主意。如果您计划更改保存范围的变量名称，或者将此模型移植到某个地方，它将变得不可用，该怎么办？对属性名称 $scope.couID 进行条件检查的情况也是如此，(也许您将其添加为一种灵 active ，以便您可以放置​​要针对范围内的多个变量进行评估的过滤条件，例如 couID 并针对各种不同的条件)。但是，即使您在 ngShow 中使用插值，绑定(bind)中的条件表达式也不会被求值(可能您也可能会遇到语法错误)。

对 ng-show 使用插值也不是一个好主意，因为它会寻找真实的表达式，甚至字符串 "false" 也是如此(如果您使用 ng-使用 bool 值插值显示，在所有情况下都保留默认情况下不起作用的条件)，最终将始终显示所有选项。

您应该不再使用 ng-repeat 来创建选择，而是开始使用 ng-options .

通过在模型中保留条件，您可以评估 ng-show 表达式，同时使用 $parse 获取项目本身。 ，为什么要为 ng-show 添加不需要的 watch ？:-

在 Controller 中注入(inject) $parse 以便根据范围解析表达式:-

.controller('MainCtrl', function($scope, $parse) {
   //.....
   //In your method just return only necessary dropdown values
    $scope.getLanOptionsForCountry = function(){
      //Just filter it based on selected country and populate the select.
      return $scope.lanOptions.filter(function(itm){
                   return $parse(itm.ngShow)($scope); 
             });
    }
   //...

您的选择将如下所示:-

 <!-- Just added for the demo to select a country -->
 <select ng-model="couID" ng-options = "country.code as country.name for country in countries">
   <option value="">--Choose one--</option>
 </select>

<!-- This will be your selected, just added a placeholder option as well and an ngModel -->
 <select ng-model="language" ng-options = "lang.name for lang in getLanOptionsForCountry()">
   <option value="">--Choose one--</option>
 </select>

<强> Plnkr - Demo

或者，您甚至可以通过删除 View 模型中的条件并为仅显示这些选项的国家/地区代码放置一个过滤器来使 View 模型更加可移植。

//Add a filter property which if present will display only for those country code else if will always display

 $scope.lanOptions = [
  {name: "English"},                      
  {name: "Danish",  filter: ["DK"]},
  {name: "French",  filter: ["FR", "BE"]},
  {name: "Dutch",   filter:["NL", "BE"]}
 ];

 $scope.getLanOptionsForCountry = function(){
    return $scope.lanOptions.filter(function(itm){
         return !itm.filter || (itm.filter.indexOf($scope.couID) + 1); 
    });
 }

<强> Plnkr2 - Demo

查看 polyfill 和对 Array.Filter 的支持