Question

我正在研究基于两个Jsons的搜索条件。我成功地将数据填充到除名称之外的相应位置。如果我尝试将数据弹出到输入框中，它工作正常。如果我尝试通过使用Value = {{names.id}}存储id来将数据填充到下拉列表中，则不会填充。提前谢谢

我的Html：

<!doctype html>
<html ng-app="myModule">
    <head>
        <title> CRUD Operations </title>
        <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script>
        <script src="script.js"></script>
    </head>
    <body ng-controller="myController">

        <br><br>
        ID:
        <select ng-model=search>
            <option ng-repeat="products in listProducts">{{products.id}}</option>
        </select>
        <!--Item:-->
        <!--<input type="text">-->
        <button ng-click="selectEdit(search)">search</button>

        <div>
        In here i am not holding the value in dropdown just populating the name into the dropdown  
        </div>

        <table>
            <thead>
                <tr>
                    <th>Edit Information </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>
                        <input type="text" ng-model="id"/>
                    </td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>
                        <input type="text" ng-model="name"/>
                    </td>
                    <td> 
                      <select ng-model="name">
                        <option ng-repeat="names in listProducts" >{{names.name}}</option>
                      </select>
                    </td>
                </tr>
                <tr>
                    <td>Price</td>
                    <td>
                        <input type="text" ng-model="price"/>
                    </td>
                </tr>
                <tr>
                    <td>Quantity</td>
                    <td>
                        <input type="text" ng-model="quantity"/>
                    </td>
                </tr>
                    <tr>
                    <td>Item</td>
                    <td>
                        <input type="text" ng-model="item"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Add" />
                        <input type="button" value="Save"/>
                    </td>
                </tr>
            </tbody>    
        </table>
        <div>
        In here i am holding the id in value="{{}}" in dropdown for my other functionalities such as update or post and trying to populate the name into the dropdown which is not successfull 
        </div>
        <table>
            <thead>
                <tr>
                    <th>Edit Information </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>
                        <input type="text" ng-model="id"/>
                    </td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>
                        <input type="text" ng-model="name"/>
                    </td>
                    <td> 
                      <select ng-model="name">
                        <option ng-repeat="names in listProducts" value={{names.id}}>{{names.name}}</option>
                      </select>
                    </td>
                </tr>
                <tr>
                    <td>Price</td>
                    <td>
                        <input type="text" ng-model="price"/>
                    </td>
                </tr>
                <tr>
                    <td>Quantity</td>
                    <td>
                        <input type="text" ng-model="quantity"/>
                    </td>
                </tr>
                    <tr>
                    <td>Item</td>
                    <td>
                        <input type="text" ng-model="item"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Add" />
                        <input type="button" value="Save"/>
                    </td>
                </tr>
            </tbody>    
        </table>
    </body>
</html>

我的控制器：

var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){

    var listProducts = [
        { id: '100', name: "Macy", price: 200, quantity: 2, item: "shoe" },
        { id: '100', name: "Macy", price: 200, quantity: 3, item: "shirt" },
        { id: '101', name: "JCPenny", price: 400, quantity: 1, item: "shoe" },
        { id: '102', name: "Primark", price: 300, quantity: 3, item: "shoe" },
        { id: '103', name: "H&M", price: 600, quantity: 1, item: "shoe" },
        { id: '103', name: "H&M", price: 700, quantity: 1, item: "shirt" }
    ];

    $scope.listProducts = listProducts;

    $scope.del = function(id){
        var txt = confirm("Are you sure??")
            if (txt==true){
                var index = getSelectedIndex(id);
                $scope.listProducts.splice(index,1);
            }

    };

    $scope.selectEdit = function(id){
        var index = getSelectedIndex(id);
        var product = $scope.listProducts[index];
        $scope.id=product.id;
        $scope.name=product.name;
        $scope.price=product.price;
        $scope.quantity=product.quantity;
        $scope.item=product.item;
    };

//  $scope.searchproduct= function(item){
//      var product = 
//  }

    function getSelectedIndex(id){
        for(i=0; i<$scope.listProducts.length; i++)
            if($scope.listProducts[i].id == id)
                return i;
        return -1;
    }
});

使用选择下拉列表中的值无法将数据填充到下拉列表中

0 个答案: