Angular ng-options - 當模型包含選項列表中不存在的值時，是否有方法添加選項？

當模型eyeColorUnknown包含一個不存在於選項中的值時Angular創建一個值爲「？」的選項如下所示，視覺描述爲空白。Angular ng-options - 當模型包含選項列表中不存在的值時，是否有方法添加選項？

<select ng-model="eyeColorUnknown" 
    ng-options="option.val as (option.desc + ' - ' + option.val) for option in options | orderBy:'desc'" 
    class="ng-pristine ng-valid"> 
    <option value="?"></option> 
    <option value="0">Blue - 001</option> 
    <option value="1">Brown - 003</option> 
    <option value="2">Green - 002</option> 
</select>

有沒有辦法要麼：

1）增加一個選項使用值和的描述「值 - 說明」，而不是？
例如：未知 - 999 藍色 - 001 布朗 - 003 綠色 - 002

2）保持的選擇，但顯示無論是「發生不明」或「VAL - 未知」？例如：

<option value="?">Unknown</option> 
    or 
    <option value="?">Unknown - 999</option> 

    <option value="0">Blue - 001</option> 
    <option value="1">Brown - 003</option> 
    <option value="2">Green - 002</option> 
</select>

3）其他？

以下是幫助重新創建場景的示例代碼。 $ scope.options當前是靜態的，但是可以使用一個服務來檢索，這個服務可以在過期日期過期時過濾掉一個選項，這會導致這種情況發生。我知道有一些討論應該在SOA的SOA方面進行，但對錶示層中可用的可能性感興趣。

<html ng-app="sampleApp"> 
<head lang="en"> 
<meta charset="utf-8"> 
<title>HTML Select Demonstration</title> 
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.2.0/css/bootstrap.css" /> 
</head> 
<body> 
    <div ng-controller="sampleAppCtrl"> 
     <h1>DEMO of Select and ng-options</h1> 
     <p></p> 
     <div> 
      <select ng-model="eyeColor" 
       ng-options="option.val as (option.desc + ' - ' + option.val) for option in options | orderBy:'desc'"></select> 
      <span>&nbsp;&nbsp;Value in the model: [{{eyeColor}}]</span> 
     </div> 
     <div> 
      <select ng-model="eyeColorUnknown" 
       ng-options="option.val as (option.desc + ' - ' + option.val) for option in options | orderBy:'desc'"></select> 
      <span>&nbsp;&nbsp;Value in the model: [{{eyeColorUnknown}}]</span> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> 
    <script type="text/javascript" src="sample_app.js"></script> 

</body> 
</html>

sample.js

var app = angular.module('sampleApp', []); 

(function() 
{ 
    angular.module('sampleApp').controller('sampleAppCtrl', SampleAppController); 

    function SampleAppController($scope) 
    { 
    $scope.eyeColor = "001"; 
    $scope.eyeColorUnknown = "999"; 

    $scope.options = [ { 
    "val": "001", 
    "desc": "Blue" 
    }, { 
    "val": "002", 
    "desc": "Green" 
    }, { 
    "val": "003", 
    "desc": "Brown" 
    } ]; 
    } 
    ; 

})();

UPDATE 2015年2月13日：在angular.js提供的selectDirective包含插入一個 '' 當模型渲染（）方法值與選項中的值不匹配。角碼摘錄如下所示，修改爲顯示爲Unknown而不是任何內容。我正在尋找建議，無需修改angular.js代碼。我希望這能夠澄清我的挑戰。

 if (!multiple) { 
     if (nullOption || modelValue === null) { 
      // insert null option if we have a placeholder, or the model is null 
      optionGroups[''].unshift({id:'', label:'', selected:!selectedSet}); 
     } else if (!selectedSet) { 
      // option could not be found, we have to insert the undefined item 
      // 
      // WARNING: Modified to show 'Unknown' rather than nothing. 
      // 
      optionGroups[''].unshift({id:'?', label:'Unknown', selected:true}); 
     } 
     }

任何援助將不勝感激。

來源

2015-02-06 Dyno

爲什麼不能靜態添加'' – 2015-02-06 20:25:00

雖然該示例顯示的是靜態值999，但實際模型將通過可能返回不同值的服務也不是選項列表的一部分。 – Dyno 2015-02-07 05:15:43

當您選擇其他的東西或者它應該保持並且可以選擇時，''選項值=「？」>未知 - 999'應該消失嗎？如果仍然存在，選擇時應該爲「ng-model」設置什麼值？ '999'的原始未知值？ – tasseKATT 2015-02-07 07:02:46

根據您對您的問題的評論回覆，除了動態檢索選項之外，還希望添加默認選項「未知 - 999」。

有2種方法可以做到這一點。

選擇1：

如果關鍵是要滿足這種選擇「未知 - 999」的要求，應該有"999"值，那麼你可以將此選項添加到動態檢索選項：

$http.get("service/eyeColors").then(function(result){ 
    $scope.options = result.data; 
    $scope.options.unshift({val: "999", desc: "Unknown"}); 
});

，只使用ng-options像往常一樣：

<select ng-model="eyeColor" 
     ng-options="o.val as (o.desc + ' - ' + o.val) for 0 in options"> 
</select>

釷這裏的問題是，如果$scope.eyeColor等於列表中不存在的值或undefined，那麼<select>將添加一個空白選項，但不會使用「未知 - 999」作爲默認值。

另一個潛在的問題是Unknown - 999會與其他選項一起排序，並且不會排在第一位。

備選方案2：

添加的默認選項爲「未知 - 999」靜態，按角的文檔上<select>：

可選，一個硬編碼的元素，與價值設置爲空字符串，可以嵌套到元素中。這個元素將代表null或「未選中」選項。示例見下面的例子。

<select ng-model="eyeColor" 
     ng-options="o.val as (o.desc + ' - ' + o.val) for 0 in options"> 
    <option value="">Unknown - 999</option> 
</select>

這裏的問題是，默認的「未知 - 999」選項將模式設置爲null而不是"999"，但它的好處是，該模型的任何無效（或尚未設置）值會自動顯示「未知 - 999」。當您需要將值保存到後端時，您可以將null更改爲"999"。

plunker

來源

2015-02-08 23:03:35

我做的東西有點類似，我想。我正在使用這種數據結構：

"choices": [ 
    { "name": "-- Select an item --", "value": "" }, 
    { "name": "1 - text", "value": "1" }, 
    { "name": "2 - text", "value": "2" }, 
    { "name": "3 - text", "value": "3" }, 
    { "name": "4 - text", "value": "4" }, 
    { "name": "Other", "value": "_ANY_" } 
]

「選擇一個項目」將在沒有選擇任何選項時顯示。當其他值不是null或「」時，「其他」將顯示。如果選擇「其他」，則會顯示一個文本輸入（當該輸入爲「髒」時，會出現一個提交按鈕）。
我這樣做的方式是創建一個虛擬數據字段，我即時計算。當用戶點擊「其他」時，我將輸入字段設置爲可見並禁用向服務器提交的數據。我找不到一個覆蓋角度設置不在選擇列表中的項目爲空。我的解決方案與其他許多過程捆綁在一起 - 我沒有明確的例子。讓我知道你是否想要更多的信息。

來源

2015-05-01 19:10:09

Angular ng-options - 當模型包含選項列表中不存在的值時，是否有方法添加選項？

回答

相關問題