Question

我是Angular JS的新手。我正在创建一个将数据存储在Web存储中的应用程序。提交查询表单后，它将从Web存储中获取当前数组，对新表单数据进行格式化，将其添加到数组中，然后将其发布回Web存储。效果很好，所有都得到了正确的保存。

$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不允许你使用函数来返回绑定数据，但我认为确实如此。

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

Answer 1

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

但是，即使您执行了<tr ng-repeat="e in enquiries()">，也会出现无限的摘要错误，因为每次查询（）都会返回一个不同的对象，并且角度等待两次相同的结果来停止摘要周期。

最好的方法是：

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

...

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

继续循环查询：

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

Answer 2

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

当您点击名称

上的查询表单时，它会绑定

Answer 3

您只需在提交后再次检索数据，然后将 $ scope.enquiries（）函数移至 $ scope.submit（）函数中。< / p>

    albums = Album.where(:title => "Greatest Hits", :artist => "The Beatles").take 
    albums.each do |album|
        puts "publisher #{album.publisher}, year published #{album.year_published}"
    end

请注意，您应该将getStoredData（）和其他与数据相关的函数放入角度服务中。

幸运的是，已经有一个很好的模块来处理LocalStorage操作： official tutorial

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

3 个答案: