Question

我有一个表格，里面有很多字段。家长说，这个表格在Angular Controller下。这个表单有一个使用Angular Controller填充的下拉列表，例如Child。单击此表单后会有添加按钮，所有详细信息都存储在数据库中。这些添加的值在同一页面中表单下方的表格中显示为一行。

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

如何选择下拉选项？

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

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

Answer 1

//代码

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

Answer 2

由于您的ctrl.comment.documentSectionTypeConstant是对象，因此您无法仅使用字符串（sectionType.description）绑定您的选择，您的ng模型也应该是documentSectionTypeConstant类型的对象。您能否按照以下方式更改ng-options？

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

这应该有用。

Answer 3

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

＆＃13;

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

＆＃13;

Answer 4

基于问题中提供的信息（创建的代码较少）和问题陈述，我已经为不同的例子重新创建了相同的场景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-options的方式是

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-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选择按钮单击下拉选项

4 个答案: