从下拉列表中选择一个选项后，angularJS中的数据绑定答案

【问题标题】：Data binding in angularJS after selecting an option from dropdown list从下拉列表中选择一个选项后，angularJS中的数据绑定
【发布时间】：2017-08-11 15:28:32
【问题描述】：

我是 angularJS 的新手。请任何人都可以告诉我如何完成这项任务，当我从下拉列表中选择某些内容时，相关信息将显示在只读字段中。以下附件如下图所示

【问题讨论】：

最好向我们展示你到目前为止所拥有的：在Stackoverflow Snippet 中提供一个可以运行 angularjs 代码的最小示例

标签： html angularjs json

【解决方案1】：

有很多方法可以实现这一点，我会用这三个值创建一个对象数组，遍历该数组并在下拉列表中显示包名称。然后一旦选择，将范围变量设置为选定对象，然后将该范围变量对象的价格和有效性绑定到每个只读字段。

Angular filters 将帮助您仅在下拉列表中显示您想要的对象部分。

编辑：这是我的解决方案

<div ng-app="myApp" ng-controller="myController">
    <div class="col-md-4">
        <select class="form-control" name="package_name" id="pack" ng-required="true">
            <option value="">--Select Package Name--</option>
            <option ng-repeat="for item in items" ng-click={change(item)}>{item.item}</option>
        </select>
    </div>
    <div class="row">
        <div class="col-md-3 col-sm-offset-1">Validity</div>
        <div class="col-md-4">
            <input type="text" class="form-control" name="validity" id="valid" ng-bind="{{selecteditem.validity}}" readonly="readonly">
        </div>
    </div><br>
    <div class="row">
        <div class="col-md-3 col-sm-offset-1">Price</div>
        <div class="col-md-4">
            <input type="text" class="form-control" name="price" id="price" ng-bind="{{selecteditem.price}}" readonly="readonly">
    </div>
</div>
<script>
    var app = angular.module("myApp",[]);

    app.controller('myController',function($scope){
        $scope.selecteditem = {};
        $scope.items = [{ "item": "item1", "validity": "1 month", "price": "0 rupees" }, {  "item": "item2", "validity": "1 year", "price": " 1000 rupees" }];

        $scope.change = function(item) {
            $scope.selecteditem = item;
        }
    });
</script>

【讨论】：

感谢您的关注
这是我在 html 中的 select 语句
下面是两个只读文件的代码，我必须在其中显示 json 数据
有效期

价格

【解决方案2】：

你可以在这里使用'ng-chnage'，比如;

<div ng-app="myApp" ng-controller="myController">
    <select ng-model="mymodel" ng-change="changed(mymodel)">
        <option ng-repeat='b in books'>{{b.name}}</option>
    </select>
    <br><br>
    <input type="text" value={{mymodel}} readonly>
    <br>
    <input type="text" id="secondOne" readonly>
</div>

<script>


    var app=angular.module("myApp",[]);

    app.controller('myController',function($scope){

    $scope.books=[{'name':'book1','price':'200' },{'name':'book2','price':'400'}]

    $scope.changed=function(value)
    {
        for(var i=0;i<$scope.books.length;i++)
          if($scope.books[i].name==value)
            $("#secondOne").val($scope.books[i].price);
    }
 })
</script>

使用 jQuery 只是为了选择一个元素。我没有把它复杂化，简单易懂。

【讨论】：

如果我能帮助你，我很高兴。
传递给 changed() 的值将是完整的对象，而不是对象的 name 属性。