Javascript 使用AngularJS更新表中值的最佳实践

我正在尝试使用AngularJS创建三向绑定，以便能够动态更改表和本地存储中的值。我还使用jqueryUI对话框窗口，在这里我想更新值，然后将其保存到表和本地存储。在

ng model

指令的帮助下，我将向对话框窗口填充值。然后在

accept

按钮上，我将值保存到本地存储器和表中：

                data.name = $scope.dialogName;
                data.author = $scope.dialogAuthor;
                data.genre = $scope.dialogGenre;
                data.price = $scope.dialogPrice;

            self.book.name = $scope.dialogName;
            self.book.author = $scope.dialogAuthor;
            self.book.genre = $scope.dialogGenre;
            self.book.price = $scope.dialogPrice;

但我认为这是一个坏主意（这段代码不起作用），必须有更好的方法来实现我的目标。多谢各位

在这个问题下面，您可以找到codeSnippet，它可以让您理解我的代码

书籍=[
{
“名称”：“Javascript”，
“作者”：“大卫·弗拉纳根”，
“体裁”：“学习”，
“价格”：“100”
},
{
“名称”：“PHP”，
“作者”：“卢克·韦林”，
“体裁”：“学习”，
“价格”：“120”
},
{
“名称”：“学习JavaScript设计模式”，
“作者”：“Addy Osmani”，
“体裁”：“学习”，
“价格”：“400”
},
{
“名称”：“理解ECMAScript 6”，
“作者”：“尼古拉斯C.扎卡斯”，
“体裁”：“学习”，
“价格”：“204”
},
{
“名称”：“编程JavaScript应用程序”，
“作者”：“埃里克·埃利奥特”，
“体裁”：“学习”，
“价格”：“214”
},
{
“名称”：“C编程语言”，
“作者”：“Brian W.Kernighan”，
“体裁”：“学习”，
“价格”：“514”
},
{
“名称”：“编程珍珠”，
“作者”：“Jon L.Bentley”，
“体裁”：“学习”，
“价格”：“114”
},
{
“名称”：“实践中的Java并发”，
“作者”：“Brian Goetz”，
“体裁”：“学习”，
“价格”：“140”
}
]
var-app=angular.module（'app'，[]）；
app.controller（'appCtrl'，函数（$scope，$http）{
$scope.title=“角度书籍列表”；
$scope.books=书籍；
$scope.addNewTask=函数（）{
$scope.books=JSON.parse（localStorage['table']）；
$scope.books.push({
名称：$scope.bookName，
作者：$scope.bookAuthor，
流派：$scope.bookGenre，
价格：$scope.bookPrice
});
$scope.bookName=“”；
$scope.bookAuthor=“”；
$scope.bookgreen=“”；
$scope.bookPrice=“”；
setItem（“table”，JSON.stringify（$scope.books））；
};
$scope.ShowConfirm=函数（）{
如果（窗口确认（“您确定吗？”））{
var local=JSON.parse（localStorage['table']）；
对于（变量i=0；i
.sortorder:after{
内容：'\25b2'；
}
.sortorder.反向：在{
内容：'\25bc'；
}
.addBookInputs输入{
显示：内联块；
宽度：250px；
}
.addBookInputs{
边缘底部：40px；
}
输入：：-webkit外部旋转按钮，
输入：：-webkit内部旋转按钮{
/*显示：无*/
-webkit外观：无；
保证金：0；
}

{{title}}




添加书本
删除？
{{book.name}
{{book.author}}
{{book.genre}
{{book.price | currency}}
编辑
删除
身份证件
名称
作者
体裁
价格
    <div class="addBookInputs">
        <input class="form-control" ng-model="newBook.bookName" placeholder="type name of the book"/>
        <input class="form-control" ng-model="newBook.bookAuthor" placeholder="type author of the book"/>
        <input class="form-control" ng-model="newBook.bookGenre" placeholder="type genre of the book"/>
        <input class="form-control" ng-model="newBook.bookPrice" placeholder="type price of the book" type="number"/>
        <span class="">
            <button class="btn btn-success" ng-click="addNewTask()">Add Book</button>
        </span>
    </div>

$scope.books = JSON.parse(localStorage.getItem('table'));

$scope.newBook = {};

$scope.addNewTask = function () {
    $scope.books.push(newBook);
    $scope.newBook = {};
    localStorage.setItem("table", JSON.stringify($scope.books));
};

$scope.enableEditor = function(book){
    $scope.selectedBook = book;
    $scope.dialogBook = angular.copy(book)

    $('#editDisplay').dialog({
        modal: true,
        resizable: false,
        width: 400,
        buttons: {
            Accept: function () {
                $(this).dialog("close");
                $timeout(function() {
                    angular.copy($scope.dialogBook,$scope.selectedBook);
                    localStorage.setItem("table", JSON.stringify($scope.books));
                })
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
};