2016-10-12 18 views
0

Angularjs如何利用輸入框的值(指數)angularjs

<tr ng-repeat="advLi in media"> 
    <td> 
     <input style="display:none;" type="text" style="width:35px;" class="form-control" name="mediaindex" value="{{$index+1}}" ng-model="advLi.media_order"> 
    </td> 
    <td>{{advLi.media_name}}</td> 
</tr> 

當我提交表單,不顯示 「媒體」 列表media_order,只顯示MEDIA_NAME。我如何獲得控制器中的media_order值。

+0

你的風格= 「顯示:無;」和style =「width:35px;」在你的輸入元素中 – Hmahwish

回答

1

如果我正確理解您的問題,您希望在文本框中將項目索引值顯示爲順序號,並且用戶以後可以更改它以重新排列順序。

然後我添加ng-init="advLi.media_order = $index + 1"在您輸入的標籤,這樣,當曾經在ng-repeat創建一個新的DOM元素然後我們intialise的ng-model值與指數+ 1,這將顯示在文本box.I've序列號也刪除了隱藏文本框的樣式。

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

 
app.controller('MainCtrl', function($scope) { 
 
    
 
    $scope.media =[{media_name:"Still"},{media_name:"Gangsta"},{media_name:"Weed it out"}]; 
 
    
 
    $scope.submit = function(){ 
 
    
 
    angular.forEach($scope.media,function(val,key){ 
 
     
 
     console.log(val.media_order + ' - '+ val.media_name); 
 
     }); 
 
    }; 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app" ng-controller="MainCtrl"> 
 
    <table> 
 
    <tr ng-repeat="advLi in media"> 
 
    <td> 
 
     <input type="text" style="width:35px;" class="form-control" name="mediaindex" value="{{$index+1}}" ng-init="advLi.media_order = $index + 1" ng-model="advLi.media_order"> 
 
    </td> 
 
     <td>{{$index +1}} </td> 
 
    <td>{{advLi.media_name}}</td> 
 
     <td>{{advLi.media_order}}</td> 
 
</tr> 
 
    </table> 
 
    <button ng-click="submit()">Submit </button> 
 
    </body>

0

它可能由undefined的初始值ng-model引起。嘗試交換屬性順序或設置正確ng-model