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

I have an Html page in an angularjs based application, I want to extract the data from the page(for example, from-date and to-date) and then pass this data into the controller. I want to pass it within a single object.

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

eg:

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

How to create this myobject and pass it to the myControlerFunc?

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

4 个解决方案

#1

in case you are using ng-repeat on an object u could directly send in your object with the function call, eg:-

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

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

....

in your controller you can read it in your function

在你的控制器中,你可以在你的功能中阅读它

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

Hence you get the complete data . Cheers!

因此,您可以获得完整的数据。干杯!

#2

If the data is in scope and then you want to populate myObject on the click of the button, you can do something like this in the controller:

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

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

If from an html element you want the data then you can make use of angular.element and do something like this:

如果从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

I think you have a slight misunderstanding of how angular works. Your page would look like this with your to and from date inside the controller like below.

我认为你对角度的工作方式有一点误解。您的页面看起来像这样,您可以在控制器内部使用您的日期和日期,如下所示。

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

The controller code as following:

控制器代码如下:

$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
     });
};

In case the toDate and fromDate are out of your control, you can use service to set the same variables inside a controller.

如果toDate和fromDate不受控制,您可以使用service在控制器内设置相同的变量。

#4

You can define the object (in your example, we're talking about myObject) ahead of time in your controller on the $scope object, and simply use ng-model to bind the fields to the properties on the object. You do not have to define the object ahead of time, though. ngModel will create the object for you when binding, if it can.

您可以在$ 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>

For the function, define it on the $scope object in your controller. In this example, passing in the object is superfluous as you can just reference it on $scope rather than an argument, but you may have your reasons.

对于该函数,在控制器中的$ scope对象上定义它。在这个例子中,传入对象是多余的,因为你可以在$ scope而不是参数上引用它,但是你可能有你的理由。

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

Demo.

For the sake of completeness, here's the body of the controller if you define things ahead of time.

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

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

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

The view would not be any different except you can remove the parameter from ng-submit:

除了可以从ng-submit中删除参数之外,视图没有任何不同:

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

Mix and match according to your needs.

根据您的需要混合搭配。

Also, you do not have to use ng-submit to call the function as shown in my examples (I didn't see your edit that included this detail). You can just call myControllerFunc from your button ng-click in the same way I've used it in ng-submit.

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

#1