Question

我试图绑定我的WebAPI获取结果到角度ng-option并且我有一点困难，我真的很感激你们可以给予的任何贡献。

这是我到目前为止所做的事情

这是我的API

        public IHttpActionResult Get()
    {
        try
        {
            var testcategories = _Service.GetTestCategories();
            if (testcategories != null)
            {
                return Ok(testcategories);
            }
            return NotFound();
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);

        }
    }

现在这是用于获取测试类别

的Angular控制器

vm.getTestCategories = function () {
        $scope._testCategories = TestCategory.query();
        console.log(_testCategories);
    };

这是我试图绑定的HTML

<div class="col-sm-9">

    <div class="input-group">
    <select name="TestCategory" class="form-control mb-10" id="TestCategory" ng-model="_test.TestCategory" ng-options="_testCategory.Id as _testCategory.Name for" on-blur-validation required><option ng-repeat="c in _categories._categories" value="{{c.Id}}">{{c.Name}}></option></select>

    <span class="input-group-btn">
    <button class="btn btn-info btn-rounded btn-ef btn-ef-5 btn-ef-5a mb-10" onclick="toggle()"><span>Add</span> <i class="fa fa-plus"></i> </button>
     </span>
     </div>

     <p class="help-block">
     <span ng-show="testForm.TestCategory.$invalid && !testForm.TestCategory.$pristine">Test Category is Required.</span>
      </p>

然后我尝试将其记录到控制台，如您所见，它工作得很好。那么如何将它绑定到font-end中的选择列表。

感谢您对此的看法。

Answer 1

您可以对select元素

使用标准角度语法

<select name="TestCategory" class="form-control mb-10" id="TestCategory" 
        ng-model="_test.TestCategory"  
        ng-options="_testCategory.Id as _testCategory.Name for _testCategory in _testCategories" on-blur-validation required>
</select>

其中$scope._testCategories您的类别数组。然后，选定的项目ID将存储到ng-model表达式中（在提供的示例中为$scope._test.TestCategory）。如果您想默认选择某个项目，请使用该元素的ID设置$scope._test.TestCategory。

如何使用AngularJS将Web API Get All结果绑定到Select选项

1 个答案: