Question

我正在尝试使用angular-Js创建一个下拉列表。当前应该在下拉列表中选择的元素来自某个数据库。（在示例应用程序中初始化为$ scope.choice =“two”）。

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

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)

对此有任何帮助将不胜感激。

由于

Answer 1

这一点是你错误的原因

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>

根据下拉列表中的选择更新文本字段（Angular JS）

1 个答案: