Angular JS，绑定范围属性到函数

Question

我是 Angular JS 的新手。我正在创建一个将数据存储在网络存储中的应用程序。提交查询表单时，它会从网络存储中获取当前数组，对新表单数据进行分类，将其添加到数组中，然后将其发送回网络存储。效果很好，所有内容都已正确保存。

$scope.submit = function () {
   // get object from form data
    var formData = { firstName: $scope.firstName, lastName: $scope.lastName, date: getDateFromatted(), posted: false };
    addStoredData(formData, ENQUIRY_STORE);
}

function getStoredData(storeName) {
    // get or create enquiry store
    var storedData = (typeof localStorage.getItem(storeName) !== 'undefined' && localStorage.getItem(storeName)) || "[]";

    // parse store into object
    storedData = JSON.parse(storedData);

    return storedData;
}

function addStoredData(data, storeName) {
     var storedData = getStoredData(storeName);
     var count = storedData.length;

     // form data into next submission slot
     storedData[count] = data;

     // turn back into JSON
     storedData = JSON.stringify(storedData);

     // slap it back in web storage
     localStorage.setItem(storeName, storedData);
}

在我的 HTML 页面上我有这个；

<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Date</th>
    </tr>

    <tr ng-repeat="e in enquiries">
        <td>{{ e.firstName }}</td>
        <td>{{ e.lastName }}</td>
        <td>{{ e.date }}</td>
    </tr>
</table>

所以我希望能够做到这一点...

// list of stored enquiries
$scope.enquiries = function () {
    return getStoredData(ENQUIRY_STORE);
}

但它没有绑定，也没有行。如果我这样做...

$scope.enquiries = getStoredData(ENQUIRY_STORE);

可以用，但是当有新询盘时，我必须继续设置它。也许 Anulgar 不允许您使用 return 数据的函数进行绑定，但我认为可以。

非常感谢任何帮助。谢谢。

Answer 1

$scope.selectedENQUIRY_STORE = null;
$scope.getStoredData= function (e) {
    $scope.selectedENQUIRY_STORE = e;
};

当您点击名称上的那个查询表时它会绑定

Answer 2

您只需在提交后再次检索数据，因此将您的 $scope.enquiries() 函数移动到您的 $scope.submit()函数。

$scope.submit = function () {
   // get object from form data
    var formData = { firstName: $scope.firstName, lastName: $scope.lastName, date: getDateFromatted(), posted: false };
    addStoredData(formData, ENQUIRY_STORE);

// FIRE UP THE FUNCTION
$scope.enquiries();
}

请注意，您应该将 getStoredData() 和其他数据相关函数放入 angular 服务中。

幸运的是，已经有一个很好的模块来处理 LocalStorage 操作： https://github.com/tymondesigns/angular-locker

Answer 3

第一种方式 ($scope.enquiries = function() ...) 它不绑定，因为你正在对函数进行 ngRepeat （它不会抛出错误，因为函数实际上有一个长度）。

但是，即使您这样做了 <tr ng-repeat="e in enquiries()">，您也会遇到无限摘要错误，因为 enquiries() 每次都返回不同的对象，而 angular 正在等待两次相同的结果才能停止摘要循环。

最好的方法是：

$scope.submit = function() {
  ...
  setEnquiries();
}

...

function setEnquiries() {
  $scope.enquiries = getStoredData(ENQUIRY_STORE);
}

并不断循环查询：

<tr ng-repeat="e in enquiries">

Angular JS，绑定范围属性到函数

Angular JS, bind scope property to function

local-storage

angularjs

Angular JS，绑定范围 属性 到函数

Angular JS, bind scope property to function

local-storage

angularjs

Angular JS，绑定范围属性到函数