Question

我从json获取表单数据。我已将所有数据绑定到表单字段中，但Resource字段数据作为单独的对象出现，我想将其显示为comma分隔。

这是我的代码

<form ng-repeat="data in editProjDetails">
                    <div>
                        <label class="displayBlock">Project Name</label>
                        <label><input type="text" ng-model="data.ProjectName" ng-disabled="all"></label>
                    </div>
                    <div>
                        <label class="displayBlock">Client</label>
                        <label><input type="text" ng-model="data.Client" ng-disabled="all"></label>
                    </div>
                    <div id="projectCoOrdBlock">
                        <label class="displayBlock">Project Co-ordinator</label>
                        <label><input type="text" ng-model="data.ProjectCoordinator" ng-disabled="true"></label>
                    </div>
                    <div id="resourceBlock">
                        <label class="displayBlock">Resource</label>
                        <label><input type="text"  ng-repeat="x in data.ResourceAllocated"  ng-model="x.ResourceName"  ng-disabled="true"></label>
                    </div>                  
</form>

我在jquery中这样做了。这就是我想用angular

实现的

 rAllo = data.ResourceAllocated;
        if (rAllo.length == 0) {
            $("#resource").val("No resources available");
        }
        else {
            for (var i = 0; i < rAllo.length; i++) {
                var arrayDatas = rAllo[i].ResourceName;
                resource.push(arrayDatas)
            }
            $("#resource").val(resource)
        }

Answer 1

尝试这样，

<div id="resourceBlock"  ng-repeat="x in data.ResourceAllocated">
     <label class="displayBlock">Resource</label>
     <label><input type="text"   ng-model="x.ResourceName"  ng-disabled="true"></label>
</div>

样本

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) { 
$scope.data =[{"Id":1010,"ProjectName":"aaa","Client":"aaa","ProjectCoordinator":["RajkumarS‌"],"OnsiteCoordinator":"aaa","ResourceAllocated":[{"ResourceName":"RajkumarS","Re‌sourceId":9,"RoleName":"Manager"},{"ResourceName":"aSd","ResourceId":1012,"RoleNa‌me":"tester"}],"ProjectRoles":null}];
 $scope.resourceAllocated= $scope.data[0].ResourceAllocated.map(function(el){return el.ResourceName}).join(",");

});

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>

<body ng-controller="myCtrl">     
 
     <label class="displayBlock">Resource</label>
     <label><input type="text"   ng-model="resourceAllocated" ></label>
 
 <script src="https://code.angularjs.org/1.6.1/angular.js"></script>
 </body>
</html>

＆＃13;

Answer 2

$scope.resourceAllocated= $scope.data.ResourceAllocated.map(function(el){return el.name}).join(",");

 <input type="text" ng-model="resourceAllocated">

尝试使用此

＆＃13;

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input type="text" ng-model="resourceAllocated">
		
</div>

</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.yearbtn = [
        {year:'2022'},
        {year:'2021'},
        {year:'2019'},
        {year:'2018'},
        {year:'2017'},
        {year:'2016'},
        {year:'2015'},
 ];
 
 $scope.resourceAllocated= $scope.yearbtn.map(function(el){return el.year}).join(",");

});
</script>
</html>

＆＃13;

工作演示

在输入字段-angularjs中显示json对象

2 个答案: