angular js將JSON添加到ng-list

我有3個屬性包含JSON對象數組'notes'。angular js將JSON添加到ng-list

$scope.notes = [ 
     { 
      'type':'txt', 
      'name': 'JohnHenry', 
      'text':'Greeting', 
     } 
    ];

我的輸入字段

`<input type="text" placeholder="Text here..." ng-model="note.input" ng-list="," ng-enter="addnote()">`

我將在下面的文本輸入到輸入文本框。

"txt-Glen-Negotiate Price, num-Phil-0939876, met-DrWalh-1505"

type屬性是顯示圖標。我希望得到如下JSON

$scope.notes = [ 
     { 
      'type':'txt', 
      'name': 'JohnHenry', 
      'text':'Greeting', 
     },{ 
      'type':'txt', 
      'name': 'Glen', 
      'text':'negotiate price', 
     },{ 
      'type':'num', 
      'name': 'Phil', 
      'text':'0939876', 
     },{ 
      'type':'met', 
      'name': 'DrWalh', 
      'text':'1505', 
     } 
    ];

如何將輸入ng-list文本轉換爲JSON對象。

來源

2015-05-07 Ryan Exlay

自己寫的指令

app.directive('jsonConvert', function(){ 
    return { 
    require: 'ngModel', 
    link: function (scope, elm, attrs, ngModel){ 
     scope.$watch(
     function(){ 
      return ngModel.$modelValue; 
     }, function(newValue, oldValue){ 
      var value = ngModel.$modelValue 
      if (value instanceof Array) return; 
      var valueArr = value ? value.split(',') : value; 
      if (!valueArr) return; 
      for (var i = 0; i < valueArr.length; i++){ 
       if (valueArr[i]){ 
       var splitItem = valueArr[i].split("-"); 
       } 
       valueArr[i] = { 
       type: splitItem[0] ? splitItem[0] : '', 
       name: splitItem[1] ? splitItem[1] : '', 
       text: splitItem[2] ? splitItem[2] : '' 
       } 
      } 
      var result = valueArr; 
      ngModel.$setViewValue(result); 
     }, true); 
    } 
    } 
})

雖然你已定義要，因爲其映射0型，1名和2文本

例可能不具有可擴展性和最佳實踐的方法有什麼 - http://plnkr.co/edit/vtcpiYsTYKq3H2QTupyS?p=preview

來源

2015-05-07 23:58:37

謝謝楊力，你能指點一下這個指令的可擴展性或最佳實踐的意義嗎？我只是不喜歡angularjs。檢查我的聲望得分。：P我開始嘗試添加前端技能。 :-)無論如何，感謝您的分享 –

對於用戶來說，遵循您所寫的格式是非常複雜的。他們可以很容易地搞定定位，所以對於txt-Glen-Negotiate Price，他們可以用不同的順序寫出Glen-txt-Negotiate Price。我會建議有3個不同的輸入字段。無論如何，只是一個用戶體驗建議。 –

angular js將JSON添加到ng-list

回答

相關問題