angularjs选择一个下拉选项按钮点击 [英] angularjs select a drop down option on button click

问题描述

我有一个表单，其中有很多字段。这种形式是在角度控制器下，说父。这个窗体有一个下拉列表，使用Angular Controller填充，如Child。在此表单上有一个添加按钮，其中所有详细信息都存储在数据库中。

此表格的每一行都有编辑按钮。点击这个编辑按钮，值应该填入上面的形式在各​​自的字段。我可以得到填充所有值，除了下拉。我有ng-model用于下拉窗体，点击编辑按钮设置适当的值。当我点击编辑时，下拉选项不被选择，虽然它的模型对象设置正确。

如何取得下拉式选项？

PN：在调试控制台时，我看到下拉列表的哈希键与从表格行检索的哈希键不同。

我的HTML代码for form：

 < div class =col-sm-8ng-controller =ConstantsController ng-init =listDocumentSectionTypeConstants（）> 
< select class =form-controlid =section-type-listname =section_type_listng-options =sectionType.description for sectionType in sectionTypes
 ng-model = ctrl.comment.documentSectionTypeConstantng-change =$ parent.setSection（）required> 
< option value => - 请选择一个栏目 - < / option> 
< / select> 
< / div> 
  

我的HTML HTML代码：

 < button class =btn btn-primary btn-xsng-click =editComment（comment）data-toggle =tooltiptitle =编辑评论data-placement =bottom>< / button> 
  

我的角度控制器

  $ scope.editComment = function（comm）{
 self.comment.documentSectionTypeConstant = comm.documentSectionTypeConstant; 
} 
  

请注意，添加，更新或删除操作没有问题 b $ b

选择下拉列表时：

 对象{
 id： DST_FOREWORD，
 active：0，
 defaultSelection：false，
 description：前言，
 showInUi：true ...} 
 $$ hashKey： 36
 accountNonExpired：true 
 accountNonLocked：true 
 active：0 
 credentialsNonExpired：true 
 defaultSelection：false 
 description：前言
 enabled：true 
 id：DST_FOREWORD
 showInUi：true 
 sortSequence：null 
 username：null 
  

点击编辑按钮 （添加了下拉值）

  Object {$$ hashKey：object：57，id：DST_FOREWORD，description：前言} 
 $$ hashKey：object：57
 description：前言
 id：DST_FOREWORD
  

请注意，哈希键是不同的在这两种情况下。

a href =http://i.stack.imgur.com/DakBi.png =nofollow>我的萤幕

解决方案

我能够使用jquery实现这一点。这是一个明确的黑客。

  $（＃section-type-list选项：contains（'+ comm.documentSectionTypeConstant.description +'））。prop（'selected'，true）;  

I have a form in which there are many fields. This form is under Angular Controller, say Parent. This form has a drop down that is populated using Angular Controller, say Child. There is an Add button to this form on click of which all the details are stored in the DB. These added values are displayed as a row in a table below the form in the same page.

Each row of this table has Edit button. On click of this edit button, the values should be populated in the form above in it's respective fields. I am able to get populated all values except the drop down. I have the ng-model used for the drop down in form, set with appropriate values on click of Edit Button. When I click on edit, drop down options are not selected though its model object is set correctly. It still displays the first default option.

How do I get the drop down option selected?

PN: On debugging the console, I see the hashkey of dropdown values different from the one retrieved from the table row.

My HTML Code for Form:

<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>

My HTML Code for Button:

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

My Angular Controller

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

Note that there is no issue in add, update or delete operation.

EDIT (To include Data JSON)

On selecting a dropdown:

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

On Click of Edit Button (Added Dropdown Value)

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

Note that the hashkey are different in both the cases. Not sure if that is what the cause is.

Edit 2

My Screen

解决方案

I was able to achieve this using jquery. This is a definite hack. Not sure how to achieve this in angular, thus opting for jquery as of now until I find a more apt solution.

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

这篇关于angularjs选择一个下拉选项按钮点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！