在ng-repeat angularJS中将$ index插入name属性

时间:2022-11-25 15:55:39

In order for ASP.NET MVC to correctly bind a list of items on a form post, the name attribute has be along the lines of

为了使ASP.NET MVC能够正确绑定表单帖子上的项目列表,name属性必须符合

name='Show.Days[0].OpenHour'
name='Show.Days[1].OpenHour'

The user can enter the number of days the show will be into a form field, which then updates the model and the ng-repeat. I'd like to be able to insert the appropriate index into the name field, something like

用户可以在表单字段中输入节目的天数,然后更新模型和ng-repeat。我希望能够在名称字段中插入适当的索引,例如

name='Show.Days[$index].OpenHour'

Is this possible with angular?

角度有可能吗?

2 个解决方案

#1


5  

Use name="Show.Days[{{$index}}].OpenHour". With this, AngularJS evaluates $index and replaces it with the correct value.

使用name =“Show.Days [{{$ index}}]。OpenHour”。有了这个,AngularJS会计算$ index并用正确的值替换它。

#2


1  

It seems that you forgot to wrap the expression with {{ and }} in the view. Do you need something like this?

您似乎忘记在视图中使用{{和}}包装表达式。你需要这样的东西吗?

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
    $scope.Show = {
      Days: [
        {OpenHour: '8am'},
        {OpenHour: '10am'}
      ]
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="day in Show.Days">
      <input type="text" ng-model="Show.Days[$index].OpenHour" name="{{Show.Days[$index].OpenHour}}">
    </div>
  </div>
</div>

or like this?

或者像这样?

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
    $scope.Show = {
      Days: [
        {OpenHour: '8am'},
        {OpenHour: '10am'}
      ]
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="day in Show.Days">
      <input type="text" ng-model="Show.Days[$index].OpenHour" name="Show.Days[{{$index}}].OpenHour">
    </div>
  </div>
</div>

#1


5  

Use name="Show.Days[{{$index}}].OpenHour". With this, AngularJS evaluates $index and replaces it with the correct value.

使用name =“Show.Days [{{$ index}}]。OpenHour”。有了这个,AngularJS会计算$ index并用正确的值替换它。

#2


1  

It seems that you forgot to wrap the expression with {{ and }} in the view. Do you need something like this?

您似乎忘记在视图中使用{{和}}包装表达式。你需要这样的东西吗?

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
    $scope.Show = {
      Days: [
        {OpenHour: '8am'},
        {OpenHour: '10am'}
      ]
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="day in Show.Days">
      <input type="text" ng-model="Show.Days[$index].OpenHour" name="{{Show.Days[$index].OpenHour}}">
    </div>
  </div>
</div>

or like this?

或者像这样?

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
    $scope.Show = {
      Days: [
        {OpenHour: '8am'},
        {OpenHour: '10am'}
      ]
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="day in Show.Days">
      <input type="text" ng-model="Show.Days[$index].OpenHour" name="Show.Days[{{$index}}].OpenHour">
    </div>
  </div>
</div>