angularjs select 单击按钮时的下拉选项

Question

我有一个表格，其中有很多字段。此表单在 Angular 控制器下，例如 Parent。这个表单有一个下拉列表，使用 Angular 控制器填充，比如 Child。此表单有一个 Add 按钮，单击该按钮，所有详细信息都存储在数据库中。这些添加的值在同一页面的表单下方的 table 中显示为一行。

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

如何选择下拉选项？

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

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

我的Angular控制器

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

请注意，两种情况下的哈希键都不同。不确定是不是这个原因。

编辑 2

My Screen

Answer 1

//代码

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

Answer 2

因为你的 ctrl.comment.documentSectionTypeConstant 是对象，你不能只用字符串 (sectionType.description) 绑定你的 select，你的 ng-model 也应该是 [=13= 的对象] 类型。你能改变你的 ng-options 如下吗？

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

这应该有效。

Answer 3

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

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

Answer 4

根据问题中提供的信息（创建更少的代码）和问题陈述，我已经DEMO用不同的example.From重新创建相同的场景，我从中了解到问题是，您正在尝试根据单击按钮来更改下拉值。

因此在演示示例中，我们有一个包含 phone 列表的下拉列表和一个用于输入 phone 价格的文本字段以及一个用于根据以下条件更改下拉列表中的值的按钮价格。

在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-options 的方式是

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

这意味着对于项目（列表）中的每个项目，在 ng-model="selectedType" 中显示项目的描述并绑定项目的价格。这就是为什么我们在单击按钮时将价格设置为 ng-model="selectedType"，该按钮会自动在下拉列表中显示所需的值。

注意：由于 item.price 是项目中的整数，对于这种情况，我们必须解析价格值，因为它绑定到输入字段 ng-model，因为 text.This 应该小心当我们使用数字作为 ng-model as ng-options 检查为 (===).

希望这个解释能让您对错误的地方有所了解。在您的情况下，将 ng-options 更改为 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       
  }

angularjs select 单击按钮时的下拉选项

angularjs select a drop down option on button click

select

controller

angularjs

dropdown