Question

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

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

Answer 2

您可以使用＆＃39; ng-chnage＆＃39;在这里，像;

<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只是为了选择一个元素。我没有把它变得复杂，它很容易理解。

从下拉列表中选择选项后，在angularJS中进行数据绑定

2 个答案: