angularjs選擇一個下拉選項上的按鈕點擊

我有一個窗體中有很多字段。這個表單位於Angular Controller之下，請說Parent。這個表單有一個下拉菜單，使用Angular Controller填充，比如Child。點擊此按鈕，將所有的細節都存儲在數據庫中。這些添加的值在同一頁面中的表格下方的表中顯示爲一行。angularjs選擇一個下拉選項上的按鈕點擊

此表的每一行都有編輯按鈕。點擊這個編輯按鈕後，這些值應該填入上面的表格中相應的字段中。除了下拉菜單，我能夠填充所有的值。我有用於在窗體中下拉的ng模型，在點擊編輯按鈕時設置適當的值。當我點擊編輯時，雖然模型對象設置正確，但沒有選擇下拉選項。它仍然顯示第一個默認選項。

如何選擇下拉選項？

PN：在調試控制檯時，我看到下拉值的hashkey不同於從表格行中檢索到的下拉值。

我對形式的html代碼：

<div class="col-sm-8" ng-controller="ConstantsController" ng-init="listDocumentSectionTypeConstants()"> 
    <select class="form-control" id="section-type-list" name="section_type_list" ng-options="sectionType.description for sectionType in sectionTypes" 
             ng-model="ctrl.comment.documentSectionTypeConstant" ng-change="$parent.setSection()" required> 
    <option value=""> -- Please Select a Section --</option> 
    </select> 
</div>

的按鈕我的HTML代碼：

<button class="btn btn-primary btn-xs" ng-click="editComment(comment)" data-toggle="tooltip" title="Edit Comment" data-placement="bottom"></button>

我的角度控制器

$scope.editComment = function (comm) {   
     self.comment.documentSectionTypeConstant = comm.documentSectionTypeConstant;   
    }

請注意，在添加，更新或刪除操作中沒有問題。

編輯（要包括數據JSON）

上選擇下拉菜單：

Object { 
    id: "DST_FOREWORD", 
    active: 0, 
    defaultSelection: false, 
     description: "Foreword", 
     showInUi: true…} 
$$hashKey:"object:36" 
accountNonExpired:true 
accountNonLocked:true 
active:0 
credentialsNonExpired:true 
defaultSelection:false 
description:"Foreword" 
enabled:true 
id:"DST_FOREWORD" 
showInUi:true 
sortSequence:null 
username:null

在點擊編輯按鈕（新增下拉值）

的

Object {$$hashKey: "object:57", id: "DST_FOREWORD", description: "Foreword"} 
$$hashKey:"object:57" 
description:"Foreword" 
id:"DST_FOREWORD"

請注意，hashkey在兩種情況下都不相同。不知道這是什麼原因。

編輯2

My Screen

來源

2016-09-26 Maz

是什麼comm.documentSectionTypeConstant的類型？它是字符串嗎？ – Ruhul

你忘了給控制器添加別名嗎？ ng-controller =「ConstantsController」，你的模型是ng-model =「ctrl.comment.documentSectionTypeConstant」 – Aparna

@Ruhul，它是一個具有id，描述等的對象。 – Maz

我能夠實現這個使用jQuery。這是一個明確的破解。不知道如何實現這個角度，因此選擇jquery到現在爲止，直到我找到更合適的解決方案。

$("#section-type-list option:contains('" + comm.documentSectionTypeConstant.description + "')").prop('selected', true);

來源

2016-09-26 23:34:09 Maz

//代碼

$scope.editComment = function (comm) {   
    self.comment={ 
     documentSectionTypeConstant : comm.documentSectionTypeConstant 
    } 
};

來源

2016-09-26 07:06:47 Aparna

不工作。 :( – Maz

當你的ctrl.comment.documentSectionTypeConstant是對象，你不能綁定只是字符串（sectionType.description），您的NG-模型的選擇也應該是documentSectionTypeConstant類型的對象。你能否改變你的ng選項如下？

ng-options="sectionType as sectionType.description for sectionType in sectionTypes"

這應該工作。

來源

2016-09-26 07:56:35 Ruhul

改變它仍然是一樣的:( – Maz

基於對這一問題提供的信息（更少的代碼來創建）和問題的陳述，我做了不同的example.From我有相同的重建場景中DEMO從問題的理解是，你正嘗試通過點擊一個按鈕來改變下拉值。

因此在演示範例中，我們有一個下拉列表，其中包含電話列表和文本字段以輸入手機的價格，以及一個按鈕，用於根據價格更改下拉列表中的值。

在HTML

<body ng-controller="dobController"> 

    <select class="form-control" id="section-type-list" name="section_type_list" 
      ng-options="item.price as item.desc for item in items" ng-model="selectedType" ng-change="setSection()" required> 
     <option value=""> -- Please Select a Section --</option> 
    </select> 
    <input type ="text" ng-model="price"/> 
    <button class="btn btn-primary btn-xs" ng-click="editComment(price)" data-toggle="tooltip" title="Edit Comment" data-placement="bottom">Change Dropdown value</button> 
</body>

在JS

$scope.selectedType = 100; //initial value to display in dropdown 
     $scope.items = [{ 
      "item": "phone", 
      "desc": "Iphone 4", 
      "price": 100, 
      "qty": 1 
     }, { 
      "item": "phone", 
      "desc": "Iphone 5", 
      "price": 200, 
      "qty": 2 
     }, { 
      "item": "phone", 
      "desc": "Iphone 6", 
      "price": 300, 
      "qty": 3 
     }, { 
      "item": "phone", 
      "desc": "Iphone 7", 
      "price": 400, 
      "qty": 1 
     }]; 

     //on click of button set the new value.. 
     $scope.editComment = function(price){ 
      $scope.selectedType = parseInt(price); 
     };

如果您在HTML觀察，我們所代表的NG選項的方法是

ng-options="item.price as item.desc for item in items"

這意味着，在每一個項目物品（列表）顯示物品的描述，並在ng-model="selectedType"中綁定物品的價格。這就是爲什麼我們通過點擊按鈕將價格設置爲ng-model="selectedType"，這會自動在下拉菜單中顯示所需的值。

注意：由於item.price是項目中的整數，所以在這種情況下，我們必須解析價格值，因爲它將輸入字段ng-model綁定爲文本。在我們使用該項時應該小心。數字爲ng-model ng-options檢查爲（===）。

希望這個解釋能讓你知道你錯在哪裏。在你的情況變化NG-選項ng-options="sectionType.ID as sectionType.description for sectionType in sectionTypes"和JS

$scope.editComment = function (comm) {   
     self.comment.documentSectionTypeConstant = comm.documentSectionTypeConstant.ID; //assuming this object contains similar data  
    }

來源

2016-09-27 05:53:20

爲了更加清晰，我已經添加了我的屏幕圖像，這應該會給你清晰的圖像，我正在尋找。 – Maz

angularjs選擇一個下拉選項上的按鈕點擊

回答

相關問題