通过在angualrjs中使用'track by'选择默认值下拉菜单不起作用 [英] Select by default value for dropdown not working by using 'track by' in angualrjs

查看：30 发布时间：2021/11/10 0:44:53 javascript angularjs angularjs-scope dom-events

本文介绍了通过在angualrjs中使用'track by'选择默认值下拉菜单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 track by 来避免附加到 value 的奇怪值 ::string 但是当我默认选择下拉菜单时，下拉菜单没有被选中..这是我的笨蛋

解决方案

(function(angular) {'使用严格';angular.module('defaultValueSelect', []).controller('ExampleController', ['$scope', function($scope) {$scope.data = {可用选项: [{id: '1', name: '选项 A'},{id:'2'，名称:'选项 B'}，{id:'3'，名称:'选项 C'}],selectedOption: '2'//这里设置了ui中select的默认值};}]);})(window.angular);

<html lang="zh-cn"><头><meta charset="UTF-8"><title>示例 - example-select-with-default-values-production</title><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script><script src="script.js"></script><body ng-app="defaultValueSelect"><div ng-controller="示例控制器"><表单名称="myForm"><label for="mySelect">做出选择:</label><选择 ng-model="data.selectedOption"><option ng-repeat="option in data.availableOptions track by option.id" value="{{option.id}}">{{ option.name}}</option></选择></表单><小时><tt>option = {{data.selectedOption}}</tt><br/>

</html>

演示的工作片段

请更改您的 <option ng-repeat="option in data.availableOptions track by option.id" value="{{option.id}}">{{ option.name}}</option></选择>

I am using track by to avoid strange values ::string that are appending to value but when I select by default dropdown, dropdown is not getting selected.. this is my plunker

Example Plunker

解决方案

(function(angular) {
  'use strict';
angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: '2' //This sets the default value of the select in the ui
     };
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-with-default-values-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
   
      
    <select ng-model="data.selectedOption"> 
       <option ng-repeat="option in data.availableOptions track by option.id" value="{{option.id}}">{{ option.name}}</option> 
    </select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
</html>

Working snippet of your demo

Please change your <select> tag as follows

<select ng-model="data.selectedOption"> 
   <option ng-repeat="option in data.availableOptions track by option.id" value="{{option.id}}">{{ option.name}}</option> 
</select>

这篇关于通过在angualrjs中使用'track by'选择默认值下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

通过在angualrjs中使用'track by'选择默认值下拉菜单不起作用 [英] Select by default value for dropdown not working by using 'track by' in angualrjs

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

通过在angualrjs中使用'track by'选择默认值下拉菜单不起作用 [英] Select by default value for dropdown not working by using &#39;track by&#39; in angualrjs

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

通过在angualrjs中使用'track by'选择默认值下拉菜单不起作用 [英] Select by default value for dropdown not working by using 'track by' in angualrjs

登录关闭