gpt4 book ai didi

javascript - 根据下拉列表中的选择更新文本字段(Angular JS)

转载 作者:行者123 更新时间:2023-11-28 19:29:04 24 4
gpt4 key购买 nike

我正在尝试使用 Angular-Js 创建一个下拉列表。当前应在下拉列表中选择即将到来的元素来自某个数据库。(在示例应用程序中初始化为 $scope.choice = "two")。

使用下面的代码,列表中的最后一个元素始终是选定的元素。另外,在关联的文本框中,我希望描述根据所选元素进行更改,但它始终默认为列表框中第一项的描述。

JS 文件

var app = angular.module('app',[]);
app.controller('Test',function($scope)
{
$scope.choice = "two";
$scope.items = [{name: 'one', age: 30, description: 'Thirty' },{ name: 'two', age: 27, description: 'Twenty Seven' },{ name: 'three', age: 50, description: 'Fifty' }];
});

HTML

<html ng-app="app">
<body>
<div ng-controller="Test">

<table class="table table-striped">

<tbody>
<tr>
<td><select
ng-model="selectedItem"
ng-options="item.name for item in items track by item.name" ></select></td>
<td><input type="text" name="field" ng-model=" selectedItem.description"
class="form-control"ng-pattern="/{{ selectedItem.description}}/" required /></td>


</tr>
</tbody>
</table>

</div>
</body>
</html>

当我更改列表中的下拉元素时,出现以下错误:

    Error: [$parse:syntax] http://errors.angularjs.org/1.3.2/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%2F%2F&p4=%2F%2F
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:6:416
at eb.throwError (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:190:268)
at eb.primary (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:189:450)
at eb.unary (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:196:183)
at eb.multiplicative (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:195:486)
at eb.additive (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:195:280)
at eb.relational (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:195:144)
at eb.equality (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:195:6)
at eb.logicalAND (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js:194:387) <input type="text" name="field" ng-model=" selectedItem.description" class="form-control ng-pristine ng-untouched ng-valid" ng-pattern="/{{ selectedItem.description}}/" required=""> angular.js:11383(anonymous function) angular.js:11383(anonymous function)

如有任何帮助,我们将不胜感激。

谢谢

最佳答案

这就是你的错误的原因

ng-pattern="/{{ selectedItem.description}}/"

如果您想选择默认选项,您可以通过以下方式执行此操作:

 $scope.items = [{name: 'one', age: 30, description: 'Thirty' },{ name: 'two', age: 27, description: 'Twenty Seven' },{ name: 'three', age: 50, description: 'Fifty' }];

//set default option
$scope.selectedItem = $scope.items[1]
<小时/>

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {



$scope.items = [{
name: 'one',
age: 30,
description: 'Thirty'
}, {
name: 'two',
age: 27,
description: 'Twenty Seven'
}, {
name: 'three',
age: 50,
description: 'Fifty'
}];

$scope.selectedItem = $scope.items[1]

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<table class="table table-striped">

<tbody>
<tr>
<td>
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.name"></select>
</td>
<td>
<input type="text" name="field" ng-model=" selectedItem.description" class="form-control" ng-pattern="" required />
</td>


</tr>
</tbody>
</table>

</div>
</div>

关于javascript - 根据下拉列表中的选择更新文本字段(Angular JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27249299/

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