angularjs - 用JS對象設置選擇元素選項值

我是AngularJS的新手，請耐心等待。angularjs - 用JS對象設置選擇元素選項值

以下是我試圖在select元素結合的JSON字符串：

[ 
{"Name":"Value 1","ID":1}, 
{"Name":"Value 2","ID":2}, 
{"Name":"Value 3","ID":3}, 
{"Name":"Value 4","ID":4} 
]

以下爲相同的JS對象：

function NameValue(nameValue){ 
    var self = this; 
    self.ID = nameValue.ID; 
    self.Name= nameValue.Name;  
}

我解析上面的JSON字符串，循環遍歷對象並使用上述JS對象將項目推入數組，例如：

angular.forEach(angular.fromJson(jsonString), function (value, key) { 
       $scope.Values.push(new NameValue(value)); 
      });

以下是我select與agularjs綁定：

<select ng-model="SelectedName" ng-options="x.Name for x in Values">/select>

當我選擇在select元素的值，整個NameValue對象是越來越設置成SelectedName屬性，它是什麼，我試圖做的。現在，當我嘗試動態設置SelectedName屬性時，該值未被選中，並且在select元素中增加了一個空的option元素。我使用{{SelectedName}}檢查動態設置時的值，以及手動選擇select元素中的相同值，並且兩者都是{"ID":2,"Name":"DAO"}，它們完全相同。我在這裏做錯了什麼？

來源

2017-07-25 seadrag0n

你初始化了'NG-view'指令的'SelectedName'？ –

的NG-選項的語法是什麼喜歡這個。 link

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

假設你有控制器，這樣

app.controller('MainCtrl', function($scope) { 
    $scope.Values = [ 
{"Name":"Value 1","ID":1}, 
{"Name":"Value 2","ID":2}, 
{"Name":"Value 3","ID":3}, 
{"Name":"Value 4","ID":4} 
]; 

$scope.SelectedByName='Value 2'; //Default setting drop down by Name property 
$scope.SelectedById=4; //Default setting drop down by ID property 

});

如果你按照下面的語法，那麼無論名稱或ID屬性將被設置爲選定的變量。

如果您需要默認選擇下拉菜單，則需要在控制器中設置相應的模型。（如上）

HTML：

<body ng-controller="MainCtrl"> 
    By name : 
    <select ng-options="value.Name as value.Name for value in Values" 
    ng-model="SelectedByName" ng-change="Print()"></select> 
    Selected value is : {{SelectedByName}} 
    <br> 
    By ID : 
    <select ng-options="value.ID as value.Name for value in Values" 
    ng-model="SelectedById" ng-change="Print()"></select> 
    Selected id is : {{SelectedById}} 
    </body>

演示plunker Click here

來源

2017-07-25 10:36:11 himanshu

看起來非常直接，但如果我想在選擇選項值而不是'name'或'id'中設置整個對象'{「ID」：2，「Name」：「DAO」}？他們用於'ng-options'的語法是將整個對象設置在'ng-model'屬性中，並且從控制器中設置它不起作用 – seadrag0n

檢查更新的plunker [here]（https://plnkr.co /編輯/ m4ov2ANe8uT7sphu48EQ？p =預覽） – himanshu

我已經更新了我的需求plunkr，因爲我從服務器獲取完整對象並綁定相同的選擇不起作用，請鏈接：https：//plnkr.co/edit/ p32Voi6pvuhTeJwHX9KX？p =預覽 – seadrag0n

首先 - 您應該在$scope中初始化SelectName。

接下來，您可以使用：

ng-options="x.id as x.name for x in values"

你能在你的模板顯示{{值}}，它的好看？當數據被推入價值時，您可能遇到重繪模板的問題。也檢查這種方式。

來源

2017-07-25 09:50:42

這裏是一個工作片段。我猜你沒有將值定義爲數組，在推動任何你必須定義變量爲數組之前。

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

 
function NameValue(nameValue) { 
 
    var self = this; 
 
    self.ID = nameValue.ID; 
 
    self.Name = nameValue.Name; 
 
} 
 

 
app.controller('myCtrl', function($scope) { 
 
$scope.Values = []; 
 
    $scope.jsonString = [{ 
 
    "Name": "Value 1", 
 
    "ID": 1 
 
    }, { 
 
    "Name": "Value 2", 
 
    "ID": 2 
 
    }, { 
 
    "Name": "Value 3", 
 
    "ID": 3 
 
    }, { 
 
    "Name": "Value 4", 
 
    "ID": 4 
 
    }]; 
 

 
    angular.forEach(angular.fromJson($scope.jsonString), function (value, key) { 
 
       $scope.Values.push(new NameValue(value)); 
 
      }); 
 
      
 
    console.log($scope.Values);   
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <select ng-model="SelectedName" ng-options="x.Name for x in Values">/select> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-07-25 09:51:29

我有同樣的問題，我找到了解決辦法：不要使用ng-options但<option>標籤

<select ng-model="..."> <option ng-repeat="..."> {{ ... }} </option></select>

來源

2017-07-25 09:52:22

angularjs - 用JS對象設置選擇元素選項值

回答

相關問題