Question

我有一个包含2个元素的表单，一个下拉列表和一个文本框。我希望将文本框与$ pattern匹配，但可以根据第一个表单控件中的选择选择我的$ pattern。

我瞄准的一个简单的抽象例子：

<form>
    <select>
        <option>A-Z</option>
        <option>0-9</option>
    </select>

    <input type="text" pattern="{{[A-Z]}}"/>
    <input type="text" pattern="{{[0-9]}}"/>
</form>

我不介意同时使用输入和使用ng-show，而是宁愿拥有一个并交换模式。你会如何在Angular中真正实现这种效果？

感谢您的回复，它让我更加接近，但我稍微复杂一点，我真的需要一个三向数据绑定（我想？）

我有一个选择元素的模型：

$scope.myModel = [
 {id: 'abc', value: 'foo'},
 {id: 'def', value: 'bar'}
]

和具有相应键的对象：

var myObj = {
    abc: /^\d{3}$/,
    def: /^\d{4}$/
};

$scope.validationPattern = myObj[$scope.myModel.id];

我从模型构建我的select元素：

和输入：

<input name="myfield" id="myfield"
      ng-model="myModel"
      ng-pattern="validationPattern"
      required 
/>

验证模式最初设置但是更改选项中的选项并不会导致它更新。

最终，如果用户在下拉列表中选择foo，则输入应该只接受3位数。

Answer 1

＆＃13;

angular.module('App', [])
.controller('MainCtrl', function ($scope) {
  this.patterns = ['[A-Z]', '[0-9]'];
  
  this.pattern = this.patterns[0];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="App" ng-controller="MainCtrl as main">
  <select ng-model="main.pattern" ng-options="pattern for pattern in main.patterns">
  </select>

<input type="text" ng-attr-pattern="{{main.pattern}}"/>

＆＃13;

基于Angular.js中的兄弟<select>选项的动态表格ng-pattern </select>

1 个答案: