简体   繁体   中英

How do I create a drop down list using angular inside CSHTML?

How do I create a drop down select list using angular inside CSHTML? I tried the below two options but neither work. Option #1

        <div class="col-sm-2">
            <div class="form-group">
                <label for="customers">Customer</label>
                <input id="{{customer.CustomerProfileId}}" ng-model="filter.customers" type="text" class="form-control selected" />
            </div>
        </div>

Option #2

    <div class="col-sm-2">
        <div class="form-group">
            <label for="customers">Customer2</label>
            <select id="{{customer.CustomerProfileId}}" ng-model="filter.customers" ng-options="for customer in filter.customers" type="text" class="form-control">{{customer.CustomerName}}</select>
        </div>
    </div>

Revision #2: Thanks to your help this version is definitely a lot closer. Most of it all works except I'm not capturing the CustomerProfileId in the customerChange event. How can I identify the customerID selected?

            <div class="col-sm-2">
                <div class="form-group">
                    <label for="customers">Customer</label>
                    <select class="form-control" ng-model="parameters.AvaliableCustomers" ng-change="customerChange(c.CustomerProfileId)" ng-options="c.CustomerName for c in parameters.AvaliableCustomers track by c.CustomerProfileId">
                        <option value="">-- Select --</option>
                    </select>
                </div>
            </div>

JS Code:

    $scope.customerChange = function (customerId) {
        var temp = customerId;
    }

Option 1:

  @Html.DropDownListFor(model => model.Gender, new List<SelectListItem>(), new { @class = "form-control", @ng_model = "gender", @ng_options = "item as item.name for item in genders track by item.value" })

Option 2:

<select name="Gender" ng-options="item as item.name for item in genders track by item.value" ng-model="gender"></select>

*.js

$scope.genders =
[
    { value: "M", name: "Male" },
    { value: "F", name: "Female" }
];

Try like this

<select formControlName="countryControl" [(ngModel)]="filter.customers">
   <option [value]="customer.CustomerProfileId" *ngFor="let customer of filter.customers">             {{customer.CustomerName}}</option>
 </select>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM