时间戳

首页 > 解决方案 > 我有一个带有 id 名称和技术类型列表的类 emp 我想用来自动态文本框的数据填充它

angularjs - 我有一个带有 id 名称和技术类型列表的类 emp 我想用来自动态文本框的数据填充它

问题描述

我希望它只在 angular-js 中解决。

    <head>
        @Scripts.Render("~/bundles/AddEmployee")
    </head>

    <body ng-app="TruModule">
        <div ng-controller="trucontrolleraddemp">
            <div style="margin-top:-20px;">
                <h1 class="decor">Add Employee</h1>

                <form name="emp" novalidate class="warn container" ng-mouseover="hidemessage()">
                    <div class="col-md-offset-2 row">
                        <div class="col-sm-4">
                            <table class="margin">
                                <tr>
                                    <td>
                                        <label for="id">Id*&emsp;&emsp;&emsp;:</label>
                                    </td>
                                    <td>
                                        <span>{{id}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="name">Name*&nbsp;&nbsp;&nbsp;&nbsp;:</label>
                                    </td>
                                    <td>
                                        <input type="text" name="name" ng-model="employee.name" ng-required="true" ng-minlength="2" />
                                        <span ng-show="emp.name.$touched && emp.name.$error.minlength">too short!!!</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="role">Role&emsp;&emsp;:</label>
                                    </td>
                                    <td>
                                        <input type="text" name="role" ng-model="employee.role" ng-maxlength="3" />
                                        <span ng-show="emp.role.$touched && emp.role.$error.maxlength">exceed!!!</span>
                                    </td>
                                </tr>
                                <tr>
                                    @* <td>
                                        <label for="role">tech&emsp;&emsp;:</label>
                                    </td>
                                   <td>
                                        <input type="text" name="role" ng-model="technology.tech" ng-maxlength="6" />
                                        <span ng-show="emp.role.$touched && emp.role.$error.maxlength">exceed!!!</span>
                                    </td>*@
                                </tr>
                            </table>
                        </div>
                        <div class="col-sm-4">
                            <table id="tblEmployee">
                                <tr>
                                    <td>
                                        <label for="tech">Technologies*&nbsp;&nbsp;&nbsp;:</label>
                                    </td>
                                    <td>
                                        <ul>
                                            <li ng-repeat="techno in technology track by $index">

                                                <input  type="text" name="tech" ng-model="employee.technology[$index].tech" ng-required="true" ng-minlength="2" />
                                            </li>
                                        </ul>

                                    </td>
                                    <td>
                                        <span><button class="img" ng-click="addtech()">+</button></span><br/><span><button class="img" ng-click="removetech()">-</button></span>
                                    </td>       
                                </tr>
                                </table>
                        </div>

                    </div>
                </form>

                <div class="mainloc">
                    <span><a class="img" href="#!Employee">&lt</a><button class="img position" ng-click="postdata(employee)" value="Submit">+</button> </span>
                </div>
                <span class="position" ng-hide="IsShown">
                    <img src="~/reload.gif" />
                </span><span style="visibility:hidden"><img src="~/reload.gif" /></span>
            <div class="dex alertpos" ng-hide="IsVisible">{{message}}</div>
           </div>

            <hr style="margin-top:91px;" />

        </div>
    </body>

我希望数据采用以下格式。它是 webapi 控制器中模型员工接受的格式。

       {
        "id":1,
        "name":"erk",
         "role": "sa",
         "technologies":[
          {"tech":"Test3"},
          {"tech":"Test1"},      
         ]
        },
      }          

the format i am getting is like 
this


     {"id":4,
    "name":"Sam",
    "role":"sa",
    "technology
        ":{"0":{"tech":"dfg"},
          "1": {"tech":"dfgdfg"}},
          }

我尝试使用 [$index] 来确保每个文本框都有不同的值。但由于它返回带有索引的对象，我不想那样做。我希望它被技术取代。 

     /// <reference path="../scripts/angular-route.min.js" />
    /// <reference path="../scripts/angular.min.js" />
   /// <reference path="../scripts/angular-route.js" />




       trumodule.service("idgenerator", function () {
        this.idfunc = function () {
            return Math.floor(((Math.random()) * 6) + 1);
        }
    });

    var trucontrolleraddemp = function ($scope, $http, $timeout, $route, idgenerator) {
        var id = idgenerator.idfunc();
        $scope.id = id;
        $scope.IsShown = true;
        $scope.technology = [];
        $scope.addtech = function () {
            $scope.technology.push({});
        }
        $scope.removetech = function () {
            $scope.technology.pop({});
        }
        $scope.postdata = function (data) {
            if (data)
                $scope.IsShown = false;       
            data.id = id
            var employee = JSON.stringify(data);
            $http({ method: "Post", url: '/api/values', data: employee, headers: { 'Content-Type': 'application/json' } })
                .then(function (response) {
                    $scope.IsVisible = false;
                    $scope.message = response.data;
                    $timeout(function () {
                        $route.reload();
                    }, 2000);

                });
        }
        $scope.message = "Please fill the fields to register a new Employee";
        $scope.hidemessage = function () {
            $scope.IsVisible = true;
        }
        $timeout(function () {
            $scope.message = "Its mandatory to fill fields with *";
        }, 2000);

    }


    trumodule.controller("trucontrolleraddemp", trucontrolleraddemp);

我有一个班级员工，我有字段 id、姓名、角色和技术类型的列表技术，这是另一个包含字符串字段技术的类，我希望使用 ng-repeat 填充数据。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebAPI_Angular.Models
{
       public class Employee
    {
        public int id;
        public string name;
        public string role;
        //public DateTime DoB;
        public List<technology> technologies;
    }

    public class technology
    {
        public string tech;
    }
}

标签： angularjsangularjs-ng-repeatangularjs-ng-model

解决方案

我已经为我的问题找到了一个替代答案，但我真的希望有人告诉我如何一次将数据以及以可接受的格式提供。我在这里发布我的答案。

var trucontrolleraddemp = function ($scope, $http, $timeout, $route, idgenerator) {
    var id = idgenerator.idfunc();
    $scope.id = id;
    $scope.IsShown = true;
    $scope.technologies = [];
    $scope.addtech = function () {
        $scope.minus = true;
        if ($scope.technologies.length<3)
        $scope.technologies.push({});
    }
    $scope.removetech = function () {
        $scope.technologies.pop({});
        if (!$scope.technologies.length)
            $scope.minus = false;
    }
    $scope.postdata = function (employee, technologies) {
        if (employee)
    $scope.IsShown = false;
        employee.id = id
    $scope.employee.technologies = [];
        angular.forEach(technologies, function (value) {
           $scope.employee.technologies.push(value);
        });
        var employee = JSON.stringify(employee);
    $http({ method: "Post", url: '/api/values', data: employee, headers: { 'Content-Type': 'application/json' } })
            .then(function (response) {
                $scope.IsVisible = false;
                $scope.message = response.data;
                $timeout(function () {
                    $route.reload();
                }, 2000);

            });
    }
    $scope.message = "Please fill the fields to register a new Employee";
    $scope.hidemessage = function () {
        $scope.IsVisible = true;
    }
    $timeout(function () {
        $scope.message = "Its mandatory to fill fields with *";
    }, 2000);

}


trumodule.controller("trucontrolleraddemp", trucontrolleraddemp);

我只发布我在 html 中所做的更改。

<td>
                                        <label for="tech">Technologies*&nbsp;&nbsp;&nbsp;:</label>
                                    </td>
                                    <td>
                                        <ul>
                                            <li ng-repeat="techno in technology track by $index">

                                                <input  type="text" name="tech" ng-model="employee.technology[$index].tech" ng-required="true" ng-minlength="2" />
                                            </li>
                                        </ul>

                                    </td>
                                    <td>
</td>
                                <td>
                                    <span><span><button class="img2" ng-click="addtech()">+</button></span><span class="mar-l20"><button class="img2" ng-show=minus ng-click="removetech()">-</button></span></span>
                                </td>       
                            </tr>
                            </table>

推荐阅读