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

问题描述

我有一个表单，其中有很多字段.这个表单在 Angular Controller 下，比如 Parent.这个表单有一个使用 Angular Controller 填充的下拉菜单，比如 Child.有一个添加按钮到这个表单，点击它所有的细节都存储在数据库中.这些添加的值在同一页面中表单下方的表格中显示为一行.

该表格的每一行都有编辑按钮.单击此编辑按钮后，应在上面的表单中的相应字段中填充值.我能够填充除下拉列表之外的所有值.我有用于表单下拉菜单的 ng-model，在点击 Edit 按钮时设置适当的值.当我单击编辑时，虽然模型对象设置正确，但未选择下拉选项.它仍然显示第一个默认选项.

如何选择下拉选项?

PN:在调试控制台时，我看到下拉值的哈希键与从表行中检索到的哈希键不同.

我的表单 HTML 代码:

<select class="form-control" id="section-type-list" name="section_type_list" ng-options="sectionType.description for sectionTypes in sectionType"ng-model="ctrl.comment.documentSectionTypeConstant" ng-change="$parent.setSection()" required><选项值="">-- 请选择一个部分 --</option></选择>

我的按钮 HTML 代码:

<button class="btn btn-primary btn-xs" ng-click="editComment(comment)" data-toggle="tooltip" title="编辑评论" data-placement="bottom"></按钮>

我的 Angular 控制器

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

注意添加、更新或删除操作没有问题.

编辑 (包括数据 JSON)

选择下拉菜单:

对象{id: "DST_FOREWORD",活跃:0，默认选择:假，描述:前言"，showInUi: 真的...}$$hashKey:"对象:36"帐户未过期:真帐户非锁定:真活跃:0凭证未过期:真默认选择:假描述:前言"启用:真id:"DST_FOREWORD"显示InUi:真排序序列:空用户名:空

点击编辑按钮 (添加下拉值)

Object {$$hashKey: "object:57", id: "DST_FOREWORD", description: "Foreword"}$$hashKey:"对象:57"描述:前言"id:"DST_FOREWORD"

请注意，两种情况下的哈希键不同.不知道是不是这个原因.

编辑 2

我的屏幕

解决方案

我能够使用 jquery 实现这一点.这是一个明确的黑客.不确定如何在 angular 中实现这一点，因此在我找到更合适的解决方案之前选择 jquery.

$("#section-type-list option: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屋！