ng-model从数组重命名时未定义的值

时间:2016-04-15 07:16:11

标签: angularjs multidimensional-array

我有一个多维数组,用于在表中创建表单字段,添加不在初始数组中的其他字段。当我输入数据后打印出此表单字段的值时,我得到了未定义。

这是数组

$scope.benefits = {
                "Emergency services": [
                    "Emergency room care",
                    "Ambulance service",
                    "Urgent care centers/facilities"
                ],
                "Laboratory services": [
                    "Lab tests & X-ray services",
                    "Imaging/diagnostics (e.g.,  MRI, CT scan, PET scan"
                ],
            };

以下是plunker代码 https://plnkr.co/edit/DQlXnX?p=preview

1 个答案:

答案 0 :(得分:0)

更改数组声明。见Plunkr。 https://plnkr.co/edit/kVgKIM?p=preview

		(function() {
			'use strict';

			angular.module('testBenefits', ['ngRoute'])
			.controller('benefitsCtrl', ['$scope', function ($scope) {

				$scope.benefits = {
					"Emergency services": {
				        "Emergency room care":{
				          'name':'',
				          'limit':'',
				          'dlimit':''
				        },
				        "Ambulance service":{
				          'name':'',
				          'limit':'',
				          'dlimit':''
				        },
				        "Urgent care centers/facilities":{
				          'name':'',
				          'limit':'',
				          'dlimit':''
				        }
				    },
				    "Laboratory services": {
				        "Lab tests & X-ray services":{
				          'name':'',
				          'limit':'',
				          'dlimit':''
				        },
				        "Imaging/diagnostics (e.g.,  MRI, CT scan, PET scan":{
				          'name':'',
				          'limit':'',
				          'dlimit':''
				        }
				    },
				};

				$scope.showItems = function() {
					console.log($scope.benefits);
				};
				
			}]);

		})();
<!DOCTYPE html>
<html>
<head>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular-route.min.js"></script>
	<script type="text/javascript">

	</script>
	<title>Testing Benefits</title>
</head>
<body class="" ng-app="testBenefits" ng-controller="benefitsCtrl">
	<div class="container" ng-repeat="(key, benefit) in benefits">
		<h3 ng-model="planBenefit.category">{{key}}</h3>
		<table class="table">
			<tr ng-repeat="(key, value) in benefit">
				<td ng-model="value.name">{{key}}</td>
				<td><input type="text" class="form-control" ng-model="value.limit"></td>
				<td><input type="text" class="form-control" ng-model="value.dlimit"></td>
			</tr>
		</table>
		<button ng-click="showItems()">Show Values</button>
	</div>
</body>
</html>