AngularJS中如何向对象添加子对象及ng-repeat使用疑问

一、为什么push方法无效？ #

push()是数组专属方法，如果你的$scope.urlMappings是普通对象（而非数组），调用push()必然失效。根据你的需求，分两种场景解决：

场景1：将urlMappings改为数组（推荐，适合有序列表场景） #

如果需要维护一组有序的URL映射，直接把urlMappings初始化为数组，就能用push()添加元素：

// 初始化时定义为数组
$scope.urlMappings = [];

// 添加子对象
$scope.urlMappings.push($scope.newUrlMappingField);

// 可选：添加后清空输入对象，方便下次新增
$scope.newUrlMappingField = { Url1: '', Url2: '' };

场景2：保留urlMappings为对象（适合需要自定义键名的场景） #

如果必须用对象存储，需要给新子对象指定唯一键名，直接赋值即可：

// 初始化时定义为对象
$scope.urlMappings = {};

// 方式1：用递增数字作为键名
var nextKey = Object.keys($scope.urlMappings).length;
$scope.urlMappings['mapping_' + nextKey] = $scope.newUrlMappingField;

// 方式2：用时间戳生成唯一键（避免重复）
var uniqueKey = 'mapping_' + Date.now();
$scope.urlMappings[uniqueKey] = $scope.newUrlMappingField;

二、ng-repeat遍历的写法 #

根据urlMappings的类型不同，写法有区别：

遍历数组 #

如果是数组，直接遍历元素即可：

<div ng-repeat="mapping in urlMappings">
  原URL: {{ mapping.Url1 }} | 目标URL: {{ mapping.Url2 }}
</div>

遍历对象 #

如果是对象，需要同时获取键名和对应子对象，用(key, value)语法：

<div ng-repeat="(key, mapping) in urlMappings">
  映射ID: {{ key }} | 原URL: {{ mapping.Url1 }} | 目标URL: {{ mapping.Url2 }}
</div>

额外提醒 #

• 确保newUrlMappingField是合法对象，初始化时建议声明：$scope.newUrlMappingField = { Url1: '', Url2: '' };，避免双向绑定异常。
• AngularJS会自动同步视图，只要正确修改urlMappings，页面会实时刷新。

内容的提问来源于stack exchange，提问作者lozee