angular select控件使用对象数据时的初始化

吾一革

于 2021-01-13 22:45:05 发布

阅读量537

点赞数

分类专栏：技术教程文章标签： js angular json

本文链接：https://blog.csdn.net/baidu_39379052/article/details/112596302

版权

在Angular中编辑页面时，需要对select控件进行初始化。当select的数据源为json数组时，通过设置selectedsite属性可能无法成功初始化。解决方法是在ng-options中加入`track by`表达式，如`ng-options='site as site.name for site in sites track by site.id'`，根据具体字段调整track by，以确保正确选中目标选项。

摘要由CSDN通过智能技术生成

我们经常会做编辑页面的功能，编辑界面就涉及到对select的初始化，例如

<select ng-model="selectedsite" ng-options="x.name for x in  sites">
</select>

如果sites是json数组数据，例如

sites = [
  {name:'javageg

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吾一革

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Angular最新教程-第四节详细说明初始化项目

https://github.com/xiaohuoni

09-20

1573

首先我们打开我们新建的项目。我们先来看一下新建项目的目录结构。查看项目目录结构src文件夹你的应用代码位于src文件夹中。所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。这个文件夹之外的文件都是为构建应用提供支持用的。根目录src/文件夹是项目的根文件夹之一。其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。运

AngularJS：使用异步数据初始化服务

xfxf996的博客

05-03

485

I have an AngularJS service that I want to initialize with some asynchronous data. 我有一个AngularJS服务，

参与评论您还未登录，请先登录后发表或查看评论

angularJS 初始化

djp0910的博客

09-02

310

AngularJS 启动有两种方式 1、绑定初始化，自动加载通过绑定来进行angular的初始化，会把js代码侵入到html中。 ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。 <body ng-app="myApp"&...

angularjs 数据初始化

cangdu的专栏

01-04

1780

window.data = { id: 1, name: "chobits" }; angular.module("app",[]).controller("ctrl", function($scope, $window) { $scope.item = $window.data; });

AngularJS(七)AngularJS对象的初始化时机

暖阳阳

05-20

1851

angular select+input 实现动态加载选项，动态输入搜索

司与

10-26

4337

先看效果：从后台查到有数据就会展示，一点击清空内容，根据大类去查询相应品牌，并且可以选择输入内容后会先在当前的选项中过滤，如果没有的话会向后台发请求查询这是组件代码 export interface SearchOption { placeholder?: string; searchId: string; // 控件的标识id，用于区分多个select...

js模拟select下拉菜单控件的代码

10-27

3. **事件绑定**：在页面加载完成后，使用`window.onload`事件来初始化下拉菜单。通过遍历所有的`<dt>`元素，为它们绑定点击事件，使得当用户点击任何一个标题时，相应的下拉列表会显示出来，而其他已经显示的列表则...

解决angular双向绑定无效果,ng-model不能正常显示的问题

10-17

在这种情况下，`ng-model`能够跟踪对象属性的变化，即使是在初始化之后。出现这种问题的原因可能有多种： - **作用域问题**：AngularJS的`$digest`循环可能没有检测到`$scope.paramValue`的变化。因为`paramValue...

Angular 2表单构建与数据验证详解

1. **创建项目与初始化** - 开始之前，需要有一个初始的Angular 2 TypeScript项目作为基础。可以通过参考Angular 2 TypeScript环境配置文档来设置或直接下载预先准备好的源代码，将项目名称从"angular-quickstart...

AngularJS 初始化

文燚的博客

09-02

2074

自动初始化 Angular 在以下两种情况下自动初始化： 1. 在 DOMContentLoaded 事件触发时 2. 在 angular.js 脚本被执行的同时如果 document.readyState 被置为 ‘complete’ （兼容老版本 IE，DOMContentLoaded 事件在 IE9 才开始被支持） 初始化时，Angular 会去找 ng-app 这个指明应用开始所在...

angular select 默认值设置方法

12-08

如下所示： <select ng-model="selected" ng-options="x.id as x.name for x in users"></select> $scope.users = [ {name:'a',id:'1'}, {name:'b',id:'2'}, {name:'c',id:'3'} ]; $scope.selected='2';//id的值，区分类型 $scope.selected=$scope.users[0].id;//如果想要第一个值以上这篇angular select 默认值设置方法就是小编分享给大家的全部内

AngularJS select选择框初始化问题

kydkong的博客

08-10

8460

对于angularjs中select空白的解决方案

angular绑定初始化及bootstrap手动初始化

jiegeng2233的博客

01-04

1072

要启动一个angular应用，可以使用ng-app指令，也可以调用bootstrap方法手动启动。绑定初始化 ng-app 通过绑定来进行angular的初始化，会把js代码侵入到html中.（缺）如果引用了angular.js脚本，而且document.readyState为“complete”状态，那么AngularJS会在DOMConten

AngularJS——select使用及默认值详解

热门推荐

Mickeymouse

09-29

1万+

在angularjs中，select设置默认值特别不方便，如果动态的改变用原生的就更不是不好解决了，那就需要用angularjs为select提供的属性和方法了。 select中的ngOption可以采用和ngRepeat指令类似的循环结构，其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。 JS代码如下： funct

angular 1.x select 默认选中

weixin_33978016的博客

04-19

962

2019独角兽企业重金招聘Python工程师标准>>> ...

AngularJS初始化Select选择框

audi_888888的博客

07-17

177

一、引入　　之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架，后来我接手相关他项目里的功能。由于对AngularJS不是太熟，在他的功能上进行二次开发就比较费劲了，印象比较深的一个就是如何创建并初始化一个Select选择框。最近我又研究了一下AngularJS，研究出一个个人觉得比较好的初始化Select选择框的方法。二、代码 <!DOCTYP...

angularjs---select使用---默认值及联动

weixin_33813128的博客

08-08

110

angularjs---select使用---默认值及联动代码一. select设置默认显示内容&&获取下拉框显示内容. HTML <div> 　　<select ng-model="current_option" ng-options="option.key for ...

select初始化操作

iteye_7547的博客

08-23

2461

select 初始化值，option 的value是id,内容是name //添加,初始化阈值字典的下拉列表中的值 function initThresholdDictionaryName(){ $.ajax({ 'url': $.baseUrl+"/thresholdLevelManager/allThresholdIte...

AngularJS学习笔记

陪你上房揭瓦的博客

11-06

414

一 Angular表达式姓名： {{ firstName + ” ” + lastName }} <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： <span ng-bind="firstName + ' ' + lastNa

Angular 4 中使用 ngx-echarts 实现数据可视化

Angular 4 中引入 ECharts 是一个常见的需求，ECharts 是一个流行的数据可视化库，提供了许多有用的图表和地图组件。下面是一个详细的示例，展示如何在 Angular 4 项目中引入 ECharts。安装 ngx-echarts 首先，...