2015-10-19 2 views
0

У меня есть форма, которая повторяет выбор в ng-repeat. в этой форме я хочу выбрать значение defualt для выбранного элемента. Фактически в первом выбранном элементе выбранное значение равно «n1», а во втором выбранном элементе выбрано значение «n2». в то время как в элементе буксировки select defualt имеет значение «n2». В чем моя проблема?repeat Выберите опцию в ng-repeat Angularjs

function MyCntrl($scope) { 
 
    $scope.data = { 
 
     orders: [{ s:'' }] 
 
    }; 
 

 
    $scope.list = [1,2]; 
 
    $scope.data.orders[0] = "n1"; 
 
    $scope.data.orders[1] = "n2"; 
 
    $scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}]; 
 
    $scope.update = function() { 
 
     console.log($scope.item.code, $scope.item.name) 
 
    } 
 
}
<!doctype html> 
 
<html ng-app> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body> 
 
    <div ng-controller="MyCntrl"> 
 
     <div ng-repeat="l in list track by $index"> 
 
      <select ng-model="data.orders[$index]" ng-change="update()"> 
 
       <option ng-selected ="data.orders[$index] == size.name" ng-repeat="size in sizes"> 
 
        {{size.name}} 
 
       </option> 
 
      </select> 
 
     </div> 
 
     <select ng-model="data.orders[0]" ng-change="update()"> 
 
      <option ng-selected ="data.orders[0] == size.name" ng-repeat="size in sizes"> 
 
       {{size.name}} 
 
      </option> 
 
     </select> 
 
     <select ng-model="data.orders[1]" ng-change="update()"> 
 
      <option ng-selected ="data.orders[1] == size.name" ng-repeat="size in sizes"> 
 
       {{size.name}} 
 
      </option> 
 
     </select> 
 
    </div> 
 
</body> 
 
</html>

ответ

2

Попробуйте этот код вместо. Он использует $parent.$index вместо $index.

ng-repeat по умолчанию $index, поэтому нет необходимости указывать его.

Это вызывает проблему в вашей внутренней петле, которая также отслеживается $index. Когда вы укажете $ index во внутреннем цикле, он набирает индекс внутренних циклов, который всегда будет оцениваться как true.

function MyCntrl($scope) { 
 
    $scope.data = { 
 
     orders:[{ s:'' }] 
 
    }; 
 
    $scope.list = [1,2]; 
 
    $scope.data.orders[0] = "n1"; 
 
    $scope.data.orders[1] = "n2"; 
 
    $scope.sizes = [{code: 1, name: 'n1'}, {code: 2, name: 'n2'}]; 
 
    $scope.update = function() { 
 
     console.log($scope.item.code, $scope.item.name) 
 
    } 
 
}
<!doctype html> 
 
<html ng-app> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body> 
 
    <div ng-controller="MyCntrl"> 
 
     <div ng-repeat="l in list track by $index"> 
 
      <select ng-model="data.orders[$index]" ng-change="update()"> 
 
       <option ng-selected ="data.orders[$parent.$index] == size.name" ng-repeat="size in sizes"> 
 
        {{size.name}} 
 
       </option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

+1

Я просто хотел бы прокомментировать заявление, что 'нг-повтора треков от $ индекса по default', который является неправильным. По умолчанию используется 'track by $ id (obj)'. Первые треки по порядку (хрупкие, если вы хотите перемещать вещи в своем массиве). Последний отслеживает личность и дает каждому элементу $$ hasKey, чтобы держать их в стороне. Отслеживание по индексу $, вероятно, является хорошей идеей, если вы хотите разрешить дублирование элементов в своем массиве или если вы уверены, что никогда не прикасаетесь к порядку массива. – ippi

Смежные вопросы