在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我的想法是这样的，在点击html的a标签时，把div的id通过url传出去让另外一个js页面接收到，然后用这个id去数组(TU)中匹配，如果id==tuid则把这个tuid所在的组的数据一个个输出到一个html页面对应的位置。
现在值我是已经接收到了，但是不懂得怎么去数据中匹配数据，然后让所需的数据输出来。麻烦各位前辈指点一下。
接收到的id：
var productNo=common.getQueryString("productNo");
数组结构如下：
var TU = [{
"tuid":"xy0001",
"imgurl":"img/178.jpg",
"title":"安全椅",
"cost":"86"
"tuid":"xy0002",
"imgurl":"img/178.jpg",
"title":"时尚包",
"cost":"96"
"tuid":"xy0003",
"imgurl":"img/178.jpg",
"title":"娃娃",
"cost":"89"
html页面：
&div class=“xsy”&
&img src="{{imgurl}}"&
&h1&{{title}}&/h1&
&p&{{cost}}&/p&&/div&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
初始化一个变量,默认为空。
$scope.query = '';
把传过来的值赋值给这个变量，
ng-repeat="v in TU | filter:{'tuid':query}
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。angularjs2版本创建一个数组，将数组里面的内容通过数据绑定的形式循环到table表单中
组件里面的template代码部分
&table id="table" class="table table-bordered table-responsive table-striped"&
&tr&&th class="col-lg-2"&货道号&/th&&th class="col-lg-4"&容量&/th&&th class="col-lg-4"&货道位置&/th&&th class="col-lg-2"&操作&/th&&/tr&
*ngFor="let i = index" &
&td&&input type="text" name="id"
value="{{item.id}}"
disabled &&input class="cou-input" type="text" name="id"
placeholder="{{item.id}}" &&/td&
&td&&input type="text" name="num"
value="{{item.num}}" disabled&&input class="cou-input" type="text" name="num"
placeholder="{{item.num}}"
&td&&input type="text" name="dress"
value="{{item.dress}}" disabled&&input class="cou-input" type="text" name="dress"
placeholder="{{item.dress}}"
&i class="iconfont"&&/i& &button (click)="getData($event)"&编辑&/button&
export class ModeldetailComponent implements OnInit {
flag = true;
{id: "000", num: 10, dress: "1排"},
{id: "001", num: 10, dress: "1排"},
{id: "002", num: 10, dress: "1排"},
{id: "003", num: 10, dress: "1排"},
{id: "004", num: 10, dress: "1排"},
{id: "005", num: 10, dress: "1排"},
{id: "006", num: 10, dress: "1排"},
{id: "007", num: 10, dress: "1排"},
{id: "008", num: 10, dress: "1排"},
{id: "009", num: 10, dress: "1排"},
{id: "010", num: 10, dress: "1排"}
getData(event){
var otr=event.path[2];
var len=event.path[2].children.length;
if(this.flag){
while (i&(len-1)){
otr.children[i].children[0].style.display="none";
otr.children[i].children[1].style.display="inline";
if (i==(len-1)){
otr.children[i].children[0].innerHTML=""
otr.children[i].children[1].innerHTML="保存";
this.flag=false;
while (i&(len-1)){
otr.children[i].children[0].style.display="inline";
otr.children[i].children[1].style.display="none";
if (i==(len-1)){
otr.children[i].children[0].innerHTML=""
otr.children[i].children[1].innerHTML="编辑";
this.flag=true;
运行之后的效果图
点击编辑之后的效果图
将js对象数组插入到table
angular修改数组
angularJS2 变量声明 var let const
【Angular2】遍历嵌套实体生成数组
AngularJS操作数组
angular.foreach 循环使用方法
Angular中forEach 对象数组
没有更多推荐了，AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定
首先说明一下功能需求：
当点击一次增加按钮的时候，下方就会多一行输入框；
当点击一次删除按钮的时候，所点击的删除按钮那行的输入框会消失；
当点击打印信息按钮的时候，把所有输入框中的数据读取出来，并打印到控制台上。
由此可看出，带有删除按钮的这部分DIV是动态的。
现在使用的是angularjs框架，那我们该如何去实现这样的功能呢？
angularjs有个很强大的功能，那就是双向数据绑定；
由此可以知道，我们就是要使用双向数据绑定的特性来实现它。
思路是这样的：
通过维护数组的方式来实现。
首先在angular控制器中创建一个数组，像这样：
$scope.showVBs = [];
当点击一次增加按钮的时候，就执行一次下方的方法：
$scope.BDetailsAdd = function(){
$scope.showVBs.push({});
当点击一次删除按钮的时候，就执行一次下方的方法：
$scope.BDetailsAdd = function(Count){
$scope.showVBs.splice(Count, 1);
当点击一次打印按钮的时候，就执行一次下方的方法:
通过遍历数组，取出里面的值
&p&&span style="font-family: 'Anonymous Pro';"&&span style="font-size:12"&$scope.printInfo = function () {&/span&&/span&&/p&&pre name="code" class="html"&&span style="font-size:12"&
for (var i = 0; i & $scope.showVBs. i++) {
console.log($scope.showVBs[i]);
html的代码如下：
&div class="row
panel panel-default panel-body"&
&div class="col-md-offset-1 panel panel-default"&
&label&{{'Details'}}&/label&
&input type="button" class="btn btn-info" value="增加" ng-click="BDetailsAdd()"&
&input type="button" class="btn btn-danger" value="打印信息" ng-click="printInfo()"&
&div class="vBaggages" ng-repeat="vba in showVBs"&
&div class="form-group col-md-2 col-md-offset-1"&
&input type="button" class="btn btn-info" value="删" ng-click="BDetailsDel($index)"&
&input type="text" class="form-control pull-right" ng-model="vba.Tag"
placeholder="Tag" style="width:70%"&
&div class="form-group col-md-2 col-md-offset-1"&
&input type="text" class="form-control pull-right" ng-model="vba.NO"
placeholder="No."&
&div class="form-group col-md-5 col-md-offset-1"&
&input type="text" class="form-control pull-right" ng-model="vba.remarks"
placeholder="Remarks"&
完整的源码：
&!docype html&
&%@ page contentType="text/charset=UTF-8" language="java" %&
&html ng-app="App"&
&title&index&/title&
&link rel="stylesheet" href="script/bootstrap/css/bootstrap.min.css"&
&script type="text/javascript" src="script/angular/angular.min.js"&&/script&
&script type="text/javascript" src="script/app/appCtrl.js"&&/script&
&body ng-controller="EditCtrl"&
&form role="form" name="editForm"&
&div class="row"&
&div class="col-md-12"&
&div class="row
panel panel-default panel-body"&
&div class="col-md-offset-1 panel panel-default"&
&label&{{'Details'}}&/label&
&input type="button" class="btn btn-info" value="增加" ng-click="BDetailsAdd()"&
&input type="button" class="btn btn-danger" value="打印信息" ng-click="printInfo()"&
&div class="vBaggages" ng-repeat="vba in showVBs"&
&div class="form-group col-md-2 col-md-offset-1"&
&input type="button" class="btn btn-info" value="删" ng-click="BDetailsDel($index)"&
&input type="text" class="form-control pull-right" ng-model="vba.Tag"
placeholder="Tag" style="width:70%"&
&div class="form-group col-md-2 col-md-offset-1"&
&input type="text" class="form-control pull-right" ng-model="vba.NO"
placeholder="No."&
&div class="form-group col-md-5 col-md-offset-1"&
&input type="text" class="form-control pull-right" ng-model="vba.remarks"
placeholder="Remarks"&
&/body&&/pre&&pre name="code" class="html"&/**
* Created by wzs on
var App = angular.module('App', [])
App.controller('EditCtrl', ['$scope', function ($scope) {
//================测试代码段================
$scope.printInfo = function () {
for (var i = 0; i & $scope.showVBs. i++) {
console.log($scope.showVBs[i]);
$scope.showVBs = [{
"Tag": "Tag1",
"NO": "No1",
"remarks": "remarks1"
"Tag": "Tag2",
"NO": "No2",
"remarks": "remarks2"
$scope.BDetailsAdd = function () {
$scope.showVBs.push({});
$scope.BDetailsDel = function (Count) {
$scope.showVBs.splice(Count, 1);
angularJs中ng-repeat遍历动态生成的表单元素绑定ng-model无效的问题
AngularJS中获取ng-repeat动态生成的ng-model值
AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定（二）
angular用ng-repeat批量处理数据
ng-repeat产生的ng-model中取不到值的问题
没有更多推荐了，扫一扫体验手机阅读
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
<span type="1" blog_id="2105289" userid='
16篇文章，7W+人气，0粉丝
<span type="1" blog_id="2105289" userid='如何利用angular2双向数据绑定，绑定一个对象数组中的数据_百度知道
如何利用angular2双向数据绑定，绑定一个对象数组中的数据
&#xe6b9;答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
草原上之狼知道合伙人
来自电脑网络类芝麻团
草原上之狼
采纳数：18599
获赞数：29798
参与团队：
&!DOCTYPE html&&html&&head&&meta charset=&utf-8&&&script src=&&/head&&body&&div ng-app=&myApp& ng-controller=&myCtrl&&{{ firstName + & & + lastName }}&/div&&script&var app = angular.module(&myApp&, []);app.controller(&myCtrl&, function($scope) {$scope.firstName = &John&;$scope.lastName = &Doe&;});&/script&&/body&&/html&只能给你举个例子 还是需要你自己学习的
热心网友知道合伙人
引用草原上之狼的回答：&!DOCTYPE html&&html&&head&&meta charset=&utf-8&&&script src=&&/head&&body&&div ng-app=&myApp& ng-controller=&myCtrl&&{{ firstName + & & + lastName }}&/div&&script&var app = angular.module(&myApp&, []);app.controller(&myCtrl&, function($scope) {$scope.firstName = &John&;$scope.lastName = &Doe&;});&/script&&/body&&/html&只能给你举个例子 还是需要你自己学习的
人家问的是angular2 ，你答个angular1
1条折叠回答
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。