Question

我正在尝试使用从json源中提取的项目创建一个小应用程序，我想要一个表单来编辑每个元素。每个元素都有几个属性，name，id，description。

以下是示例，但编辑表单暂时不执行任何操作。我稍后将使用该示例将数据存储在数据库中。

我正在尝试找到最佳解决方案，例如在推送编辑时直接在每个元素上使用此编辑表单。最好的方法是什么？

提前致谢！

的script.js

var app = angular.module('myApp', []);

function Controller($scope) {

var items = [
    {
        "id": "1",
        "name": "John",
        "price": "55.33",
        "description": "Lorem ipsums aute irure doln v anim id est laborum.",
        "flag": "0"
    },
    {
        "id": "2",
        "name": "Mike",
        "price": "68",
        "description": "Loriannaj jh said ihsa djni cjipsums aute irure doln v anim id est laborum.",
        "flag": "0"
    },
    {
        "id": "15",
        "name": "George",
        "price": "78",
        "description": "This is the description",
        "flag": "1"
    }
];
    //Initialize the controller and the UI
    $scope.items = angular.fromJson(items);

}

HTML

<html ng-app="myApp">
<head>
    <title>Test Page</title>
    <link type="text/css" rel="stylesheet" href="style.css">

    <!-- Angular Staff -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>


</head>
<body>
<header>
</header>
<section>

<div class="columns2" ng-controller="Controller">

    <div style="width: 500px; display: inline-block">
        <h3>ITEMS</h3>
        <div ng-repeat="item in items">
            <div class="user_div" >
            <a href="#" ng-click="showDetails = ! showDetails">{{item.name}} </a>
            <a style="float: right" href="#" ng-click="showEdit = ! showEdit">Edit </a>
            </div>

            <div class="user_data" ng-show="showDetails" >{{item.description}}</div>
            <div class="user_data" ng-show="showEdit" >
                <h3>Edit Item</h3>
                <input  value="{{item.name}}" type="text"  >
                <input  value="{{item.description}}" type="text" >
                <button  ng-click="editItem({{item.id}},{{itemName}},{{itemDescription}})">Edit</button>
            </div>
        </div>

        <br>

        <pre>Items: {{items|json}}</pre>    </div>

</div>

</body>
</html>

Answer 1

我遇到了同样的要求并提出了这个解决方案：

<tr ng-repeat="transaction in data.transactions">
 ...
 <td>
 <input ng-model="transaction.numAvailable" 
        ng-style="!transaction.edit && {'background-color': '#eeeeee'}"
        ng-blur="saveShelf(transaction)"
        ng-click="editShelf(transaction)"
        class="form-control" 
        ng-value="transaction.numAvailable"/>
 </td>
</tr>

在我的controller.js中：

$scope.editShelf = function(trans){
  trans.edit = true;
};
$scope.saveShelf = function(trans){
  trans.edit = false;
  //call service to save value
};

基本上，你有一个看起来用bg-color禁用的输入：#eee，onclick删除了bg-color，onblur重置了bg-color。为了完成这项工作，我使用lodash在我的列表中添加了'edit = false'：

_.forEach($scope.data.transactions, function(trans){
   trans.edit = false;
});

Answer 2

您可以使用x-editable进行内联编辑。由于我们无法看到任何示例，您可以使用此模块进行内联编辑。

Answer 3

你可以创建这样的工厂

app.factory('userFactory', function ($http) {
    var factory = {};
    factory.get = function () {
        return $http.get('your_rest_url', {}).then(function (resp) {
            console.log('Success', resp);
        }, function (err) {
            console.error('ERR', err);
        });
    };
});

inject it to your controller
var Ctrl = function ($scope, userFactory) {
    $scope.items = userFactory.get();
};

然后将数据绑定到表单元素

<input ng-model="items.property">

Angular.Js中的内联编辑表单

3 个答案: