代码之家 › 专栏 › 技术社区 › Sonic Soul

角度选择ng选择不工作(使用<option ng repeat>)

angularjs-ng-model angularjs-ng-repeat angularjs javascript

Sonic Soul · 技术社区 · 8 年前

已选择ng 什么都不做。

<select ng-model="localModel.priceType">
    <option 
            ng-repeat="item in vm.priceTypes"
            ng-selected="localModel.priceType == item"
            ng-value="item"
            >{{item.name}}</option>
</select>

<select ng-model="localModel.priceType">
    <option 
            ng-repeat="item in vm.priceTypes"
            ng-selected="localModel.priceType.id == item.id"
            ng-value="item"
            >{{item.name}}</option>
</select>

或

<select ng-model="localModel.priceType">
    <option 
            ng-repeat="item in vm.priceTypes track by item.name"
            ng-selected="localModel.priceType.name == item.name"
            ng-value="item"
            >{{item.name}}</option>
</select>

挑选出来的

我需要ng模型作为对象,而不是object.someId。

通过使用ng选项而不是<选项>ng repat公司

<select ng-model="localModel.priceType" ng-options="item as item.namefor item in vm.priceTypes track by item.name"></select>

2 回复 | 直到 8 年前

Sá´á´ Oná´á´á´ 8 年前

ngValue 需要ngValue的字符串。将ngRepeat与 <option> value="{{item}}"

angular.module('myApp', [])
  .controller('ctrl', function($scope) {
    $scope.vm = {
      priceTypes: [{
          id: 3,
          name: 'pound'
        },
        {
          id: 5,
          name: 'Yen'
        },
        {
          id: 6,
          name: 'dollar'
        }
      ]
    };
    //select model value
    $scope.localModel = {
      priceType: $scope.vm.priceTypes[1]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <select ng-model="localModel.priceType">
  <option 
            ng-repeat="item in vm.priceTypes as item"
            ng-selected="localModel.priceType.id == item.id"
            value="{{item}}"
            >{{item.name}}</option>
</select>
  <div>
    priceType: {{ localModel.priceType }}
  </div>
</div>

更简单的方法是使用 ngOptions 上 <select> 标签,具有多种形式的组合:

select as label for value in array track by expr

请参阅表格下的部分 Usage

有棱角的模块('myApp',[])
$范围。vm={
id:3,
},
id:5,
姓名:“Yen”
id:6,
]
};
$范围。局部模型={
价格类型:$scope.vm.priceTypes[1]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <select ng-model="localModel.priceType" ng-options="item as item.name for item in vm.priceTypes track by item.name">
</select>
  <div>
    priceType: {{ localModel.priceType }}
  </div>
</div>

KTU 8 年前

https://docs.angularjs.org/api/ng/directive/ngSelected

ngSelected 不与交互 select ngModel selected 属性。如果你正在使用 ngModel公司 在select上,不应使用 已选择NG ngModel公司

尝试

<select ng-model="localModel.priceType">
  <option  ng-repeat="item in vm.priceTypes track by item.name"
           ng-value="item.name">
      {{item.name}}
  </option>
</select>

你可以改变 ng-value 任何你想要的价值 vm.priceTypes[0]