通過角度指令將布爾值轉換爲是/否

我需要使用指令將布爾值顯示爲是/否。我的指示如下通過角度指令將布爾值轉換爲是/否

directives.directive('niBooltoYesno', 
     function() { 
      return { 
       restrict: 'EA', 
       require: 'ngModel', 
       link: function (scope, element, attrs, ngModel) { 
        function formatter(value) { 
         if (value) { 
          return value === true ? 'Yes' : 'No'; 
         } else { 
          return ''; 
         } 
        } 
        ngModel.$formatters.push(formatter); 

       } 
      }; 
     }); 

<ni-boolto-yesno data-ng-model="set_unit.isActive" ></ni-boolto-yesno>

但它不起作用。在這一點上請幫助我。

來源

2014-11-23 Amin Uddin

你應該完全描述_how_它不工作或提供jsfiddle/codepen。 – hon2a 2014-11-23 10:15:31

爲什麼不是像{{user.booleanValue？'是'：'no'}} – 2017-01-31 22:48:01

你沒有使用正確的工具。這應該是一個過濾器：

{{ someBooleanValue | yesNo }}

過濾器是那樣簡單

module.filter('yesNo', function() { 
    return function(input) { 
     return input ? 'yes' : 'no'; 
    } 
});

如果您仍然選擇使用的指令，你不需要ngModel和格式化，這是在形式使用必須讀取和寫入模型的字段。所有你需要的是一個模板：

module.directive('yesNo', function() { 
    return { 
     template: '<span>{{ yesNo ? "yes" : "no" }}</span>', 
     scope: { 
      yesNo: '=' 
     } 
    }; 
});

，你woud與使用它作爲

<span yes-no="someBoolean"></span>

來源

2014-11-23 10:18:47

過濾器非常適合我的情況。 – 2014-11-24 06:54:14

問題出在if (value)。這導致return value === true ? ...行僅在該值實際上爲真時（即從不爲false）才被處理。你只需要正確構造條件：

function formatter (value) { 
    return (value === true) ? 'Yes' : ((value === false) ? 'No' : ''); 
}

更好的可讀性版本：

function formatter (value) { 
    if (value === true) { 
     return 'Yes'; 
    } else if (value === false) { 
     return 'No'; 
    } else { 
     return ''; 
    } 
}

編輯：我沒有看過你的HTML。另一個答案指出，使用ng-model這是一個壞主意，創建一個過濾器應該適合你很好。

來源

2014-11-23 10:17:57 hon2a

你的if語句嵌套是有點關閉（格式化版本）。你沒有添加一個else-if塊。如果A {X} else {if B {Y} else {Z}}'等於'if A {X} else if B {Y}，則三元運算符的else塊將包含第二個if else塊 – Kieran 2017-05-19 06:50:32

@Kieran' } else {Z}'和扁平代碼總是更容易閱讀。 – hon2a 2017-05-19 07:32:24

我定義爲0文本值以及1 ...

{{object.PROPERTY?'Yes':'No'}}

...當呈現如下：

{ 
    "PROPERTY": 0 
}

結果然後是'不'。

來源

2016-11-17 16:09:50

這真的是更好的答案。它很簡單，乾淨。 JB Nizet的答案完美無瑕，但在這種情況下是矯枉過正的。它適用於更復雜的場合。 – Rob 2016-11-17 22:56:54

通過角度指令將布爾值轉換爲是/否

回答

相關問題