Question

我对使用CRUD操作开发应用程序的角度有点新意。我试图保持下拉值以便进一步使用，并根据选择将数据填充到字段中。

无法根据下拉列表的选择将数据填充到字段中：如果我使用＆＃34; product.id作为listProducts＆＃34;中产品的product.name而不是ng-options =＆＃34; product.name for productProducts＆＃34;

提前感谢任何帮助

＆＃13;

var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var listProducts = [
		{ id: '100', name: "Macy", price: 200, quantity: 2 },
		{ id: '101', name: "JCPenny", price: 400, quantity: 1 },
		{ id: '102', name: "Primark", price: 300, quantity: 3 },
		{ id: '103', name: "H&M", price: 600, quantity: 1 }
	];
	
	$scope.listProducts = listProducts;
  
  });

＆＃13;

<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">
  Here i am populating the data into the fields without holding the id as the value in the dropdown which is successfull
  <div>
  <select ng-model=search ng-options="product.name for product in listProducts">
		</select>	
		<table>
			<thead>
				<tr>
					<th>Edit Information </th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>ID</td>
					<td>
						<input type="text" ng-model="search.id"/>
					</td>
				</tr>
				<tr>
					<td>Name</td>
					<td>
						<input type="text" ng-model="search.name"/>
					</td>
				</tr>
				<tr>
					<td>Price</td>
					<td>
						<input type="text" ng-model="search.price"/>
					</td>
				</tr>
			</tbody>	
		</table>
    </div>
   if i hold the id as value display the name in the dropdown , not able to populate the data into the fields 
<div>
<select ng-model=searchProduct ng-options="product.id as product.name for product in listProducts"></select>		
		<table>
			<thead>
				<tr>
					<th>Edit Information </th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>ID</td>
					<td>
						<input type="text" ng-model="searchProduct.id"/>
					</td>
				</tr>
				<tr>
					<td>Name</td>
					<td>
						<input type="text" ng-model="searchProduct.name"/>
					</td>
				</tr>
				<tr>
					<td>Price</td>
					<td>
						<input type="text" ng-model="searchProduct.price"/>
					</td>
				</tr>
			</tbody>	
		</table>
    </div>
    </body>
</html>

＆＃13;

Answer 1

实际上，你几乎就在那里，

在您的控制器中，只需在示波器中指定一个空变量来保存所选的值：

var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var listProducts = [
        { id: '100', name: "Macy", price: 200, quantity: 2 },
        { id: '101', name: "JCPenny", price: 400, quantity: 1 },
        { id: '102', name: "Primark", price: 300, quantity: 3 },
        { id: '103', name: "H&M", price: 600, quantity: 1 }
    ];

    $scope.listProducts = listProducts;
    $scope.selectedProduct = {};
  });

并将其绑定到select：

 <select ng-model="selectedProduct" ng-options="product.name for product in listProducts">

现在，只要您需要ID，只需通过$scope.selectedProduct.id

进行访问即可

无法根据下拉列表选择将数据填充到字段中

1 个答案: