javascript - AngularJS 从 ng-repeat 创建的表单中选择值

标签 javascript php angularjs web-services prestashop

首先:对不起，如果片段有很多标签(:

大家好!

目前我正在开发一个基于 AngularJS 的应用程序。该应用程序通过 Prestashop Webservice 建立了数据库连接。 .我正在尝试编辑数据库中的内容。我认为这个例子会更清楚。

总结
该网络服务可用于创建与现有 prestashop 安装的链接。链接本身是用于访问数据库的 REST API。有了这些信息，我们就能够从数据库中获取、设置、编辑和删除数据。有关客户表，请参见以下示例:

<?php

require_once('.././PSWebServiceLibrary.php');

/**
* get information from PrestaShop
*/
		
$webService = new PrestaShopWebservice($url, $key, $debug);

$opt = array(
	"resource" => "customers",
	"display" => "full",
);

$jsonUrl = ($webService->get( $opt ));

//json encode it
$json = json_encode($jsonUrl);


echo($json);

?>


本例中所有变量的定义如下:
  • $webservice => 是它自己的网络服务。它由 shop_url 建立( $url ), Authentication_key ( $key ) 和调试选项 ( $debug )
  • $opt => 这是一个创建 SELECT 的数组在这种情况下，在数据库上部署的查询将是:SELECT * FROM customers . resource = 数据库表和 display = 在这种情况下的过滤器:一切。

    • 下一步是编译JSON app.js 中的数据以便我们能够选择并显示查询的不同部分，请参见下面的示例:

    myApp.controller('CustomerController', function($scope, $http) {
    $http.get('config/get/getCustomers.php').then(function (response) {
        $scope.customers = response.data.customers.customer
    });
});


    现在我们可以选择 JSON 的不同部分了。数据。我们能够结合 ng-controller 以 HTML 格式显示这些数据。 , ng-repeat和 ng-bind .请参见下面的示例:

    <div ng-controller="CustomerController" class="col-lg-12">
  <div class="row listrow" ng-repeat="customer in customers | orderBy: customer.id">
      <div class="col-lg-8">
        <p class="customer" ng-bind="customer.id + ' ' + customer.firstname + ' ' + customer.lastname">   </p>
      </div>
  </div>
</div>


    在这种情况下，我们将重复 JSON 中的客户 ID、名字和姓氏。数据。输出将是这样的:

    <div ng-controller="CustomerController" class="col-lg-12">
  <div class="row listrow" ng-repeat="customer in customers | orderBy: customer.id">
      <div class="col-lg-8">
        <p class="customer">1 John Doe</p>
        <p class="customer">2 John Don't</p>
        <p class="customer">3 John Does</p>
      </div>
  </div>
</div>


    所以到目前为止一切正常，我添加的下一件事是一个编辑按钮，这将打开一个带有表单的模式。表单将加载与客户 ID 对应的所有客户信息。这些信息包括地址、电话号码等。请参见下面的示例:

    <div class="row listrow" ng-repeat="customer in customers | orderBy: customer.id">
		<div class="col-lg-8">
			<p class="customer" ng-bind="customer.id + ' ' + customer.firstname + ' ' + customer.lastname"></p>
		</div>
		<div class="col-lg-2">
			<a href="" data-toggle="modal" data-target=".bd-example-modal-sm{{customer.id}}">
				{{'Wijzig' | translate }}
			</a>
		</div>
		<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="modal fade bd-example-modal-sm{{customer.id}}"  tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content customer-modal">
					<div class="modal-header product-modal-header no-border">
						<div class="container">
							<div class="row">
								<form ng-controller="CustomerController" class="bottomborderinput margin-t-25 col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
									<div class="form-group row justify-content-between">
										<div>
											<label class="d-flex">{{ 'Customer_id' | translate }}</label>
											<input title="customer_id" type="number" name="customer_id" id="customer_id" class="form-control" aria-describedby="" ng-value="customer.id">
										</div>
										<div class="col-6">
											<label class="d-flex">{{ 'Voornaam' | translate }}</label>
											<input title="Voornaam" type="text" name="editFirstname" id="firstname" class="form-control" aria-describedby="" ng-value="customer.firstname">
										</div>
										<div class="col-6">
											<label class="d-flex">{{ 'Achternaam' | translate }}</label>
											<input title="Achternaam" type="text" name="editLastname" class="form-control" aria-describedby="" ng-value="customer.lastname">
										</div>
									</div>
									<div class="form-group row justify-content-between">
										<div class="col-12">
											<label class="d-flex">{{ 'Email' | translate }}</label>
											<input title="Email" type="email" name="editEmail" class="form-control" aria-describedby="" ng-value="customer.email">
										</div>
									</div>
									<!-- Addresscontroller for address table -> DB -->
									<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="form-group row justify-content-between">
										<div class="col-12">
											<label class="d-flex">{{ 'Straat en huisnummer' | translate }}</label>
											<input title="Straat en huisnummer" type="text" name="editResidential" class="form-control" aria-describedby="" ng-value="address.address1">
										</div>
									</div>
									<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="form-group row justify-content-between">
										<div class="col-6">
											<label class="d-flex">{{ 'Postcode' | translate }}</label>
											<input title="Postcode" type="text" name="editArea_code" class="form-control" aria-describedby="" ng-value="address.postcode">
										</div>
										<div class="col-6">
											<label class="d-flex">{{ 'Plaats' | translate }}</label>
											<input title="Plaats" type="text" name="editCity" class="form-control" aria-describedby="" ng-value="address.city">
										</div>
									</div>
									<!-- ID Lang omzetten naar text language -->
									<div class="form-group row justify-content-between">
										<div class="col-6">
											<label class="d-flex">{{ 'Land' | translate }}</label>
											<input title="Land" type="text" name="editCountry" class="form-control" aria-describedby="" ng-value="customer.id_lang">
										</div>
									<!-- Address db -->
										<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="col-6">
											<label class="d-flex">{{ 'Telefoon nummer' | translate }}</label>
											<input title="Telefoon nummer" type="tel" name="editPhone" class="form-control" aria-describedby="" ng-value="address.phone">
										</div>
									</div>
									<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="form-group row justify-content-between">
										<div class="col-6">
											<label class="d-flex">{{ 'Bedrijfsnaam' | translate }}</label>
											<input title="bedrijfsnaam" type="text" name="editCompany_name" class="form-control" aria-describedby="" ng-value="address.company">
										</div>
									<!-- Address DB -->
										<div class="col-6">
											<label class="d-flex">{{ 'BTW nummer' | translate }}</label>
											<input title="BTW - nummer" type="text" name="editVat_number" class="form-control" aria-describedby="" ng-value="address.vat_number">
										</div>
									</div>
									<div ng-repeat-end class="form-group row justify-content-between">
										<div class="col-12">
											<label class="d-flex">{{ 'Klantgroep' | translate }}</label>
											<input title="Klantroep" type="text" name="editKlantgroep" class="form-control" aria-describedby="" ng-value="customer.id_default_group">
										</div>
									</div>
									<div class="form-group text-center">
										<button type="submit" ng-click="EditCustomer()" class="defaultbutton margin-t-50">
											<svg class="align-middle float-left " width="27" height="25" viewBox="13 12 27 21" xmlns="http://www.w3.org/2000/svg">
												<path d="M23.065 32.28c-.287 0-.575-.124-.8-.373l-8.182-9.057c-.47-.52-.494-1.394-.052-1.95.443-.554 1.183-.58 1.653-.06l7.365 8.153 14.395-16.6c.46-.532 1.2-.523 1.652.022.452.544.443 1.416-.018 1.95L23.882 31.886c-.227.262-.522.393-.817.393z" fill="#FFF" fill-rule="evenodd"/>
											</svg>{{ 'Klant opslaan' | translate }}
										</button>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="modal-footer no-border product-modal-footer">
						<a data-dismiss="modal">{{ 'Sluit' | translate }}</a>
					</div>
				</div>
			</div>
		</div>


    关于上述片段的简短摘要

    “wijzig”链接可以翻译为编辑客户。 on-click模态将打开。在打开模态之前 class将被 ID 过滤以便从数据库中请求正确的信息。

    因此，如果客户“3”住在 smurfs 村:3 过滤器将从数据库中的地址表中获取此信息。

    现在问题
    问题不在于选择数据，而在于更新数据。如您所见，数据是从数据库中选择的，并作为值加载到表单中。然后可以由用户编辑这些值。就像有人从一所房子搬到另一所房子一样，他的地址必须更新。表格如下:

    <form ng-controller="CustomerController" class="bottomborderinput margin-t-25 col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
									<div class="form-group row justify-content-between">
										<div>
											<label class="d-flex">{{ 'Customer_id' | translate }}</label>
											<input title="customer_id" type="number" name="customer_id" id="customer_id" class="form-control" aria-describedby="" ng-value="customer.id">
										</div>
										<div class="col-6">
											<label class="d-flex">{{ 'Voornaam' | translate }}</label>
											<input title="Voornaam" type="text" name="editFirstname" id="firstname" class="form-control" aria-describedby="" ng-value="customer.firstname">
										</div>
										<div class="col-6">
											<label class="d-flex">{{ 'Achternaam' | translate }}</label>
											<input title="Achternaam" type="text" name="editLastname" class="form-control" aria-describedby="" ng-value="customer.lastname">
										</div>
									</div>
									<div class="form-group row justify-content-between">
										<div class="col-12">
											<label class="d-flex">{{ 'Email' | translate }}</label>
											<input title="Email" type="email" name="editEmail" class="form-control" aria-describedby="" ng-value="customer.email">
										</div>
									</div>
									<!-- Addresscontroller for address table -> DB -->
									<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="form-group row justify-content-between">
										<div class="col-12">
											<label class="d-flex">{{ 'Straat en huisnummer' | translate }}</label>
											<input title="Straat en huisnummer" type="text" name="editResidential" class="form-control" aria-describedby="" ng-value="address.address1">
										</div>
									</div>
									<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="form-group row justify-content-between">
										<div class="col-6">
											<label class="d-flex">{{ 'Postcode' | translate }}</label>
											<input title="Postcode" type="text" name="editArea_code" class="form-control" aria-describedby="" ng-value="address.postcode">
										</div>
										<div class="col-6">
											<label class="d-flex">{{ 'Plaats' | translate }}</label>
											<input title="Plaats" type="text" name="editCity" class="form-control" aria-describedby="" ng-value="address.city">
										</div>
									</div>
									<!-- ID Lang omzetten naar text language -->
									<div class="form-group row justify-content-between">
										<div class="col-6">
											<label class="d-flex">{{ 'Land' | translate }}</label>
											<input title="Land" type="text" name="editCountry" class="form-control" aria-describedby="" ng-value="customer.id_lang">
										</div>
									<!-- Address db -->
										<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="col-6">
											<label class="d-flex">{{ 'Telefoon nummer' | translate }}</label>
											<input title="Telefoon nummer" type="tel" name="editPhone" class="form-control" aria-describedby="" ng-value="address.phone">
										</div>
									</div>
									<div ng-if="customer.id == address.id" ng-repeat="address in addresses" class="form-group row justify-content-between">
										<div class="col-6">
											<label class="d-flex">{{ 'Bedrijfsnaam' | translate }}</label>
											<input title="bedrijfsnaam" type="text" name="editCompany_name" class="form-control" aria-describedby="" ng-value="address.company">
										</div>
									<!-- Address DB -->
										<div class="col-6">
											<label class="d-flex">{{ 'BTW nummer' | translate }}</label>
											<input title="BTW - nummer" type="text" name="editVat_number" class="form-control" aria-describedby="" ng-value="address.vat_number">
										</div>
									</div>
									<div ng-repeat-end class="form-group row justify-content-between">
										<div class="col-12">
											<label class="d-flex">{{ 'Klantgroep' | translate }}</label>
											<input title="Klantroep" type="text" name="editKlantgroep" class="form-control" aria-describedby="" ng-value="customer.id_default_group">
										</div>
									</div>
									<div class="form-group text-center">
										<button type="submit" ng-click="EditCustomer()" class="defaultbutton margin-t-50">
											<svg class="align-middle float-left " width="27" height="25" viewBox="13 12 27 21" xmlns="http://www.w3.org/2000/svg">
												<path d="M23.065 32.28c-.287 0-.575-.124-.8-.373l-8.182-9.057c-.47-.52-.494-1.394-.052-1.95.443-.554 1.183-.58 1.653-.06l7.365 8.153 14.395-16.6c.46-.532 1.2-.523 1.652.022.452.544.443 1.416-.018 1.95L23.882 31.886c-.227.262-.522.393-.817.393z" fill="#FFF" fill-rule="evenodd"/>
											</svg>{{ 'Klant opslaan' | translate }}
										</button>
									</div>
								</form>

    ng-click app.js 中的函数:

    $scope.EditCustomer = function() {
        var customer_id = $('input[name="customer_id"]').val();
        var firstname = $('input[name="editFirstname"]').val();
        var lastname = $('input[name="editLastname"]').val();
        var email = $('input[name="editEmail"]').val();
        var residential = $('input[name="editResidential"]').val();
        var area_code = $('input[name="editArea_code"]').val();
        var city = $('input[name="editCity"]').val();
        var country = $('input[name="editCountry"]').val();
        var phone = $('input[name="editPhone"]').val();
        var	company_name = $('input[name="editCompany_name"]').val();
        var	vat_number = $('input[name="editVatnumber"]').val();
        var	customer_group = $('input[name="editCustomer_group"]').val();


        $.ajax({
            type:'POST',
            data:{customer_id:customer_id, firstname:firstname, lastname:lastname,email:email, residential:residential, area_code:area_code, city:city, country:country, phone:phone, company_name:company_name,vat_number:vat_number, customer_group:customer_group},
            url:"config/edit/editCustomer.php", // PHP Page URL To php code saving the input to the database
            success : function(response) {
                alert(response.msg);
            }
        })
    };


    我知道 $.ajax应改为$http.post .

    对应的php更新文件:

    <?php
// Here we define constants /!\ You need to replace this parameters
define('DEBUG', true);
require_once "../PSWebServiceLibrary.php";

// Here we use the WebService to get the schema of "customers" resource
$webService = new PrestaShopWebservice($url, $key, DEBUG);

// Edit customer.
// Request the input field values.

$customer_id = $_REQUEST['customer_id'];
$customer_firstname = $_REQUEST['firstname'];
$customer_lastname = $_REQUEST['lastname'];
$customer_email = $_REQUEST['email'];
$customer_residential = $_REQUEST['residential'];
$customer_area_code = $_REQUEST['area_code'];
$customer_city = $_REQUEST['city'];
$customer_country = $_REQUEST['country'];
$customer_phone = $_REQUEST['phone'];
$customer_company_name = $_REQUEST['company_name'];
$customer_vat_number = $_REQUEST['vat_number'];
$customer_group = $_REQUEST['customer_group'];

$opt = $webService->get(array(
        "resource" => "customers",
        "display" => "full",
        "filter[id]" => $customer_id
    ));
$resource = $opt->children()->children();
$resource->id = $customer_id;
$resource->id_shop = 1;
$resource->passwd = "";
$resource->id_default_group = $customer_group;
$resource->id_lang = $customer_country;
$resource->firstname = $customer_firstname;
$resource->lastname = $customer_lastname;
$resource->email = $customer_email;
$resource->date_add = "";

$xml = $opt->asXML();    // all of it!
$ret = $webService->edit(array(
    'resource' => 'customers',
    'id' => $customer_id,
    'putXml' => $xml
));

$opt1 = $webService->get(array(
    'resource' => 'addresses',
    'display' => 'full',
    'filter[id]' => $customer_id
));
$resource = $opt1->children()->children();
$resource->id = $customer_id;
$resource->company = $customer_company_name;
$resource->lastname = $customer_lastname;
$resource->firstname = $customer_firstname;
$resource->id_country = $customer_country;
$resource->alias = "mijn adres";
$resource->address1 = $customer_residential;
$resource->postcode = $customer_area_code;
$resource->city = $customer_city;
$resource->phone_mobile = $customer_phone;
$resource->vat_number = $customer_vat_number;

$xml1 = $opt1->asXML();    // all of it!
$ret1 = $webService->edit(array('resource' => 'addresses', 'id' => $customer_id, 'putXml' => $xml1));


    所以实际的问题是，当更新客户时，我总是检索 id = 1。由于第一次出现 <form>，在过滤器内是 id=1。由于所有输入名称都相同JS将抓取第一个，在本例中为 id = 1 的那个。

    因此，对于使用 id = 1 编辑客户。一切正常，但是当我尝试使用 id = 3 编辑客户时，仍然选择第一个 id。

    我的问题是:有没有办法以更适当的方式过滤它，以便选择和编辑具有正确 id 的正确表单？

    我希望一切都清楚，如果不是，请告诉我。

    提前致谢!

    最佳答案

    首先，我创建了一个 Controller 来处理逻辑。我假设您有类似的布局。

    对于胆量，请在您的 ng-repeat 上, 创建一个 ng-click对于每个 <li> (或其他类似元素)。 ng-click上的方法应该传入 customer 的值(或您在每次迭代中获得的单个值)

    所以，点击任何<li>将反过来引用它创建时使用的相同模型对象。

    (function() {
  var app = angular.module("cus", []);

  var CustomerController = function() {
    var vm = this;
    vm.Customers = [{ // Should be like Edit #2
        name: "Joe",
        age: 25,
        gender: "Male"
      },
      {
        name: "Lisa",
        age: 18,
        gender: "Female"
      },
      {
        name: "Foobar",
        age: 89,
        gender: "Dog"
      },
    ];
    vm.showInfo = function(customer) {
      console.log(customer.name + " is a " + customer.age + " year old " + customer.gender);
    }
    vm.submitInfo = function(customer) { // This is your $EditCustomer()
        console.log("Submitting " + customer.name + " to database.");
        console.log("Saving age as: " + customer.age);
        console.log("Saving gender as: " + customer.gender);
        console.log("Successfully saved " + customer.name + "!");
    }
  }

  app.controller("CustomerController", [CustomerController]);
})();
    <html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="cus">
  <div ng-controller="CustomerController as vm">
    <ul ng-repeat="customer in vm.Customers">
      <li ng-click="vm.showInfo(customer);">{{ customer.name }}</li>
      <li ng-click="vm.showInfo(customer);">{{ customer.age }}</li>
      <li ng-click="vm.showInfo(customer);">{{ customer.gender }}</li>
    </ul>

    <div class="form-group" ng-repeat="customer in vm.Customers"> <!-- This is your form-->
      <ng-form name="userFieldForm">
        <label>{{ customer.name }}'s Age</label>
        <input type="text" class="form-control" name="email" ng-model="customer.age">
        <label>{{ customer.name }}'s Gender</label>
        <input type="text" class="form-control" name="gender" ng-model="customer.gender">
        <button type="submit" ng-click="vm.submitInfo(customer)">Submit</button>
      </ng-form>
    </div>
  </div>
</body>

</html>


    在您的情况下，您需要传入 customer 的值在您的 $scope.EditCustomer 上.

    所以会变成这样
    $scope.EditCustomer = function(customer) {
    var customer_id = customer.id;
    var firstname = customer.firstName;
    var lastname = customer.lastName;
    var email = customer.email;
    ...


    $.ajax({
        type:'POST',
        data:{customer_id:customer_id, firstname:firstname, lastname:lastname,email:email, residential:residential, area_code:area_code, city:city, country:country, phone:phone, company_name:company_name,vat_number:vat_number, customer_group:customer_group},
        url:"config/edit/editCustomer.php", // PHP Page URL To php code saving the input to the database
        success : function(response) {
            alert(response.msg);
        }
    })
};

    编辑

    我已对其进行了更新以创建 ng-form在 ng-repeat 内.为每个 customer in Customers 创建一个表单.把 <button>与 ng-click="submitInfo(customer)"将导致您将该对象传递到方法中，以便从 ng-repeat 创建的表单中获取信息。到方法解析表单中的数据并保存。

    编辑#2

    而不是仅仅设置$scope.customers = response.data.customers.customer ,
    让它变成这样，
    myApp.controller('CustomerController', function($scope, $http) {
    vm.Customers =  [];
    var responseData; // Holds the JSON response
    $http.get('config/get/getCustomers.php').then(function (response) {
        responseData = response.data.customers; // response.data.customers.customer;
        for(var cus in responseData) { // Filling up vm.Customers with data from response
            vm.Customers.push(cus);
        }
    });
});

    这样，您将填充 Customer从响应中获取对象后。现在，如果您将它们与提到的所有其他内容联系起来，它应该可以工作。

    关于javascript - AngularJS 从 ng-repeat 创建的表单中选择值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46975224/

    上一篇：javascript - 通过嵌套的JSON数组对象nodejs解析

    下一篇：javascript - 视觉 : How to re-render view midway through event loop cycle?

    相关文章：

    php - 在 iPhone 中使用多部分表单数据发布图像和其他数据

    c# - 如何将对象数组从 Angular 前端传递到 C# 后端

    javascript - 触摸事件不返回触摸数据

    javascript - Google 开发工具中显示的对象不一致

    javascript - NgFor 之后访问 ViewChildren 列表

    javascript - js 区分正则表达式捕获组

    javascript - HTML，JavaScript : on button click validation not working

    php - 如何从给定的数字月份 PHP 获取该月的第一个和最后一个日期

    php - 将 Laravel 推送通知延迟 5 秒

    angularjs - 观察 Controller Angularjs 中的对象

    ©2024 IT工具网  联系我们