Forms Js中的内联编辑表单_Forms_Angularjs_Edit

Forms Js中的内联编辑表单

forms angularjs

Forms Js中的内联编辑表单,forms,angularjs,edit,Forms,Angularjs,Edit,我正在尝试制作一个小应用程序，其中包含从json源代码中提取的项目，我想要一个表单来编辑每个元素。每个元素都有几个属性：名称、id和描述下面是一个示例，但编辑表单目前不起任何作用。稍后我将使用该示例将数据存储在数据库中例如，我试图找出最好的解决方案，在按下“编辑”按钮时，将此编辑表单直接放在每个元素上。最好的方法是什么提前谢谢 script.js var app = angular.module('myApp', []); function Controller($scope) { v

我正在尝试制作一个小应用程序，其中包含从json源代码中提取的项目，我想要一个表单来编辑每个元素。每个元素都有几个属性：名称、id和描述

下面是一个示例，但编辑表单目前不起任何作用。稍后我将使用该示例将数据存储在数据库中

例如，我试图找出最好的解决方案，在按下“编辑”按钮时，将此编辑表单直接放在每个元素上。最好的方法是什么

提前谢谢

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>


测试页
项目
{{item.description}
编辑项
编辑


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

项目：{{Items | json}}

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

您可以创建这样的工厂

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

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

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

我遇到了同样的需求，并提出了以下解决方案：

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

基本上，您有一个使用bg颜色看起来被禁用的输入：#eee，onclick删除bg颜色，onblur重置bg颜色。为了实现这一点，我在列表中添加了一个“edit=false”，其中包含：

示例在哪里？

这里是示例

在哪里？很抱歉错过了。下面是示例代码我的问题是如何实现内联编辑表单。我需要指令吗？我明白了，然后抽象出你想对每个表单元素重复的部分，然后用它创建一个指令。或者您可以有一个内联编辑指令，只需在需要的地方插入即可。

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