如何在angularjs中的选择框或内部选项中使用ng-model?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在angularjs中的选择框或内部选项中使用ng-model?相关的知识,希望对你有一定的参考价值。

我有一个包含选择框的表数据。我想使用ng-model而不是{{n.triggerOn}来绑定数据。当我使用<option value="">{{n.triggerOn}}</option>时,下面的代码工作正常。但我想使用ng -model <option ng-model="n.triggerOn"></option>绑定数据

                <td>
                    <select class="browser-default event trigger">
                        <option value="">{{n.triggerOn}}</option>
                        <option value="all">
                            All Conditions
                        </option>
                        <option value="any">
                            Any Conditions
                        </option>
                    </select>
                </td>

我正在以JSON格式获取数据

             rule: {
                        name:"abc",
                        status:"enable",
                        triggerOn: "all",
                        onSuccess: "on"
                    }

谁能帮我?我是angularjs的新手。对不起,如果这是一个愚蠢的错误。谢谢。

答案

这是工作代码

如果您需要更改,请告诉我。

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      angular.module("myApp", []).controller('test', ['$scope', function($scope) {

        $scope.rules = [
          {name:"abc", status:"enable", triggerOn: "none", onSuccess: "on" },
          {name:"abc", status:"enable", triggerOn: "any", onSuccess: "on" },
          {name:"abc", status:"enable", triggerOn: "all", onSuccess: "on" }
        ];

      }]);


    }());
  </script>
  <style></style>
</head>

<body ng-app="myApp">
  <div ng-controller="test">
    
    <select class="browser-default event trigger" ng-model="selectedRule" 
    ng-options="rule.triggerOn for rule in rules track by rule.triggerOn"></select>

    <div>
      <b>Selected Rule:</b> {{selectedRule.triggerOn}}
    </div>

  </div>
</body>

</html>
另一答案

在select标签中使用ngmodel属性,在选项而不是值使用ng-value中,告诉我它是否无效。

另一答案

您需要在布尔值中再发送一个名为selected的变量。

 $scope.rules = [
      {name:"abc", status:"enable", triggerOn: "none", onSuccess: "on", selected: false },
      {name:"abc", status:"enable", triggerOn: "any", onSuccess: "on", selected: true},
      {name:"abc", status:"enable", triggerOn: "all", onSuccess: "on", selected: false }
    ];

然后在html中绑定ng-selected attr

<option ng-repeat="rule in rules" value="{{rule.triggerOn}}"
                    ng-selected="{{ rule.selected == true }}">

以上是关于如何在angularjs中的选择框或内部选项中使用ng-model?的主要内容,如果未能解决你的问题,请参考以下文章

Angularjs:使用ng-option时如何在选择中包含空选项

如何使选定的值与 AngularJS 中的选项值不同?

如何使已选择的选项不显示在另一个选择选项下拉 JAVASCRIPT/ANGULARJs

仅当在 angularjs 中选择选项卡时如何调用函数(或指令)?

AngularJS 根据预定义的值更改 SELECT 列表中的选定选项

如何在 AngularJS 2 中放置已选择的选项?