How to use ng-model inside select box or inside options in angularjs?

Question

I'm having a table data which consists of a select box. I want to bind the data using ng-model instead of {{n.triggerOn}. The below code is working properly when I use<option value="">{{n.triggerOn}}</option>. But I want to bind the data using 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>

I'm getting the data in JSON format as

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

Can anyone help me? I'm new to angularjs. Sorry if it was the silly mistake. Thankyou.

share the sample json as well

Nishanth
– Nishanth

2018-03-05 08:14:18 +00:00
Commented Mar 5, 2018 at 8:14 — Nishanth
– Nishanth, Commented Mar 5, 2018 at 8:14
@Nishanth updated the code. Please check it out

Sai Manoj
– Sai Manoj

2018-03-05 08:20:34 +00:00
Commented Mar 5, 2018 at 8:20 — Sai Manoj
– Sai Manoj, Commented Mar 5, 2018 at 8:20

Mohamed Wahshey · Accepted Answer · 2018-03-05 09:17:19Z

1

Use ngmodel attribute in the select tag, in the option instead of value use ng-value, tell me if it didnt work.

edited Mar 5, 2018 at 9:17

answered Mar 5, 2018 at 8:23

Mohamed Wahshey

4221 gold badge7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sai Manoj Over a year ago

will check that. Thanks

Nishanth · Accepted Answer · 2018-03-05 08:30:02Z

here is the working code

Let me know if you need any changes in that.

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" 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>

Thanks, But I'm looking for the different scenario. I just want to show the previous set value. so I'm getting those values from rules and displaying in the options as [{{selectedRule.triggerOn}}].But I want to display the same using ng-model. Note: By default, the previous set value should be displayed in options

KishoreKumar Mani · Accepted Answer · 2018-03-05 09:18:21Z

You need to send one more variable called selected in boolean.

 $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 }
    ];

then bind ng-selected attr in html

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

Collectives™ on Stack Overflow

How to use ng-model inside select box or inside options in angularjs?

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related