Question

我的demo中有一个列表。在每个项目中都有下拉列表。如果用户更改了任何下拉值，我想更改按钮文本。

实施例：目前，按钮文字为Fixed。如果用户更改任何下拉值（a到b或c），它也应该change按钮文本。

这是我的代码：

Plunk DEMO

<body ng-controller="MainCtrl">
    <button>{{btn}}</button>
    <div ng-repeat="x in arr">{{x}}
    <select class="selectpicker">
          <option>A</option>
          <option>B</option>
          <option>C</option>
    </select>

    </div>
  </body>

换句话说我将再次解释。当你运行应用程序时，如果显示按钮文本是“固定”。现在，如果我将下拉值A更改为B。第一个和第三个下拉列值保持相同A。然后按钮文本更改为Changed。

Answer 1

看起来您正在寻求验证。您可以检查下拉元素是否已更改状态，并相应地修改按钮上的文本。

Angularjs验证的精彩教程： https://scotch.io/tutorials/angularjs-form-validation

您可以在下拉列表中设置名称属性，并按如下方式使用：

<form name="form">
   <button>{{ form.dropdown.$touched ? 'changed' : btn }}</button>
   <select name="dropdown">
      ...
   </select>
</form>

Answer 2

您可以使用angular inbuilt directive ng-change，该值在更改时触发

在您的HTML中，

<select class="selectpicker" ng-model="val" ng-change="update()">

在你的控制器中，

  $scope.update=function(){
     $scope.btn = 'Changed';
  }

检查更新的插件

Plunk DEMO

Answer 3

将ng-model指令与ng-change指令一起使用：

<body ng-controller="MainCtrl">
    <button>{{btn}}</button>
    <div ng-repeat="x in arr">{{x}}
        <select class="selectpicker"
                ng-model="arr.select[$index]"
                ng-change="selectAction($index)"
        >
              <option>A</option>
              <option>B</option>
              <option>C</option>
        </select>   
    </div>
</body>

来自文档：

select directive与ngModel一起使用，以提供scope和<select>控件之间的数据绑定（包括设置默认值）。它还处理动态<option>元素，可以使用ngRepeat或ngOptions指令添加这些元素。

— AngularJS <select> Directive API Reference

如何更改角度1中的按钮文字？

3 个答案: