AngularJS：将对象参数从视图传递到控制器函数答案

【问题标题】：AngularJS: Passing object parameter from view to a controller functionAngularJS：将对象参数从视图传递到控制器函数
【发布时间】：2023-03-19 10:22:01
【问题描述】：

我在基于 angularjs 的应用程序中有一个 Html 页面，我想从页面中提取数据（例如，从日期和到日期），然后将这些数据传递给控制器。我想在单个对象中传递它。

例如：

<button ng-click="myControllerFunc(myObject)" />

如何创建这个 myobject 并将其传递给 myControlerFunc？

【问题讨论】：

在范围内是从开始日期到现在吗？
from date 和 to-date 不在范围内，它们只是文本框值
您可以通过将范围变量分配给各个文本框的 ng-model 来将它们放入范围

标签： jquery angularjs model-view-controller

【解决方案1】：

如果你在一个对象上使用 ng-repeat，你可以通过函数调用直接发送你的对象，例如：-

<div ng-repeat="item in items">
 <button data-ng-click="callFunction(item)">call my object</button>
</div>

....

在你的控制器中，你可以在你的函数中读取它

$scope.callFunction = function(item){
     console.log(item);
};

因此你得到了完整的数据。干杯！

【讨论】：

【解决方案2】：

如果数据在范围内，然后您想在单击按钮时填充 myObject，您可以在控制器中执行以下操作：

$scope.myControllerFunc =function(myObject) {
     myObject.fromDate = $scope.fromDate;
     myObject.toDate = $scope.toDate;
}

如果您想要从 html 元素获取数据，那么您可以使用 angular.element 并执行以下操作：

$scope.myControllerFunc =function(myObject) {
     var fromDate = angular.element( document.querySelector( '#fromDate' ) );
     var toDate= angular.element( document.querySelector( '#toDate' ) );
     myObject.fromDate = fromDate.val();
     myObject.toDate = toDate.val();
}

【讨论】：

【解决方案3】：

我认为您对 Angular 的工作原理略有误解。您的页面将如下所示，在控制器中包含您的 to 和 from 日期，如下所示。

<div data-ng-controller="searchBar" data-ng-init="id='g3_v1'" class="widget">
    <form data-ng-submit="formSubmit()">
        From date: <input data-ng-model="fromDate" type="text" ><br/>
        To   date: <input data-ng-model="toDate" type="text" ><br/>
        <button ng-click="formSubmit()" />
    </form>
</div>

控制器代码如下：

$scope.formSubmit = function() {
    var data = {"toDate":$scope.toDate, 
                "fromDate": $scope.fromDate};
    $http({
        url: "json/search", 
        method: "GET",
        params: data
     }).then(
         function(resp)
         {
             //success callback
         },
         function(error)
         {
             //failure callback
     });
};

如果 toDate 和 fromDate 超出您的控制范围，您可以使用 service 在控制器内设置相同的变量。

【讨论】：

【解决方案4】：

您可以提前在控制器中的 $scope 对象上定义对象（在您的示例中，我们谈论的是 myObject），然后只需使用 ng-model 将字段绑定到目的。不过，您不必提前定义对象。 ngModel 会在绑定时为你创建对象，如果可以的话。

  <form name="frm" ng-submit="myControllerFunc(myObject)">
    From date:
    <input type="date" ng-model="myObject.fromDate" />
    <br />To date:
    <input type="date" ng-model="myObject.toDate" />
    <br />
    <button type="submit">Submit</button>
    <small>Check console log for value upon submit</small>
  </form>

对于函数，在控制器中的$scope 对象上定义它。在此示例中，传入对象是多余的，因为您可以在 $scope 而不是参数上引用它，但您可能有自己的理由。

$scope.myControllerFunc = function(obj) {
    console.log(obj); // do whatever you want with obj
};

Demo.

为了完整起见，如果您提前定义，这里是控制器的主体。

$scope.myObject = { fromDate: null, toDate: null };

$scope.myControllerFunc = function() {
    console.log($scope.myObject); // do whatever you want with obj
};

除了您可以从ng-submit 中删除参数外，视图不会有任何不同：

<form name="frm" ng-submit="myControllerFunc()">

根据您的需要混合搭配。

此外，您不必使用ng-submit 来调用我的示例中所示的函数（我没有看到您的编辑包含此详细信息）。您可以像在 ng-submit 中使用它一样，从您的按钮 ng-click 调用 myControllerFunc。

【讨论】：