gpt4 book ai didi

javascript - 无法使用 Angular Js 在动态插入 View 中显示对象数组值

转载 作者:太空宇宙 更新时间:2023-11-04 16:31:55 30 4
gpt4 key购买 nike

我刚刚开始学习 AngularJS。我正在尝试用 3 个文件 index.html 、 view1.html 和 view2.html 编写此代码。在index.html中,我定义了模块和 Controller 函数。在 Controller “sc”中,我有一个带有2个字段名称和城市编码的javascript对象数组。我已经使用路由器功能添加了一个新 View ,该 View 将用于用户搜索,并且我还添加了一个按钮来动态地将一对新值插入到对象数组中。

但我无法打印 view1 和 view2 中的名称和城市值。我确信范围存在一些问题,但我无法找到错误。

下面是index.html文件代码。

<html ng-app="demo" >
<head>
<title>AngularStuff!!!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body >
<!-- <div ng-controller='sc'>
</div>-->
<div ng-controller="sc">
<div ng-view=" "></div>
</div>
<script>
var demo=angular.module('demo',['ngRoute']);

demo.controller('sc',function($scope){



$scope.customers=[
{name:'Johnny',city:'ab'},
{name:'Jane',city:'ab'},
{name:'Apple',city:'tv'},
{name:'Clarice',city:'ku'},
{name:'Clayton',city:'lm'}

];


$scope.add=function()
{

$scope.customers.push({name:$scope.n.name,city:$scope.n.city}) ;


};



}


);



demo.config(


function($routeProvider)
{
$routeProvider
.when('/',

{

controller:'sc',
templateUrl:'View1.html'



}
)
.when('/View2',
{
controller:'sc',
templateUrl:'View2.html'


}


)





.otherwise({redirectTo:'/'});



}





);



</script>
</body>
</html>

下面是view1.html文件代码

  
<div >

<h2 align="center">View1</h2>

Name:
<input type="text" ng-model="filter.name"/>

<ul>
<li ng-repeat="cust in cutomers|filter:filter.name">
{{cust.name}}--{{cust.city}}
</li>
</ul>
Customer Name:
<input type="text" ng-model="n.name"/>
<br/>

Customer City:
<input type="text" ng-model="n.city"/>

<br/>
<button ng-click="add()">Add Customer</button>
<a href="View2.html">View2</a>
</div>

下面是view2.html

  
<div >

<h2 align="center">View1</h2>

Name:
<input type="text" ng-model="filter.name"/>

<ul>
<li ng-repeat="cust in cutomers|filter:filter.name">
{{cust.name}}--{{cust.city}}
</li>
</ul>
Customer Name:
<input type="text" ng-model="n.name"/>
<br/>

Customer City:
<input type="text" ng-model="n.city"/>

<br/>
<button ng-click="add()">Add Customer</button>
<a href="View2.html">View2</a>
</div>

View 加载正确,但值未显示。 below the first input 'Name' tab the object array values name and city are not getting dispalyed

最佳答案

 <ul>
<li ng-repeat="cust in customers | filter:cust.name">
{{cust.name}} {{cust.city}}
</li>
</ul>

这是一个工作 plunker

关于javascript - 无法使用 Angular Js 在动态插入 View 中显示对象数组值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39724868/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com