Question

我有一个列表（list1）的项目，将通过ng-repeat显示在浏览器中。通过从其他列表（列表2）中选择项目，可以将这些项目添加到list1。

我写了一个方法来将项目添加到模型中。如果list1不为空，这很有用。但是如果list1为空，则item将添加到模型中，但没有ng-repeat来处理它。源代码仅包含HTML注释：

<!-- ngRepeat: item in list1 -->

我应该在代码中添加什么才能让这个ngRepeat处理新项目？

此致托马斯

Answer 1

这里有一个jsfiddle来演示你想要做什么，尝试点击List2中的一个项目，它会将它添加到List1。我们有两个列表作为HTML：

<h3>List1</h3>
<ul>
  <li ng-repeat="person in list1">{{person.name}}</li>
</ul>
<h3>List2</h3>
<ul>
    <li ng-repeat="person in list2" ng-click="ToList1(person)">{{person.name}}</li>
</ul>

在我们的Controller中，我们必须定义list1模型，所以当我们将数据推送到它时，

$scope.persons = [{name:"john"},{name:"mouhamed"},{name:"emilie"}];
// Initialise list1 as an empty array
$scope.list1 = [];
$scope.list2 = $scope.persons;

$scope.ToList1 = function(person){
  $scope.list1.push(person);  
};

ToList1函数是在点击List2中的一个项目时触发的，它将对象（在ou exemple person中）添加到list1模型。

<小时/> 如果您为每个列表使用控制器，则可以使用 $ rootScope。$ emit（）和 $ rootScope。$ on（）函数在控制器之间进行通信。

function FirstCtrl($scope, $rootScope) {

  $scope.list1 = [];
  // Listener for the list1/add event, that will execute the callback when received a 'list1/add' event
  $rootScope.$on('list1/add', function (event, data) {
    $scope.list1.push(data);
  });
}

function SecondCtrl($scope, $rootScope) {
   $scope.persons = [{
    name: "john"
   }, {
    name: "mouhamed"
   }, {
    name: "emilie"
   }];
  $scope.list2 = $scope.persons;

  $scope.ToList1 = function (person) {
    // Emit the 'list1/add' event with the selected person object
    $rootScope.$emit('list1/add', person);
  };
}

这是一个展示此案例的JSFiddle。

如何处理ng中的新项目如果模型开始为空，则重复模型

1 个答案: