コントローラからのデータに基づくAngularJSのプレフィックス入力フィールド

Question

コントローラからのデータでフォームをあらかじめ入力しようとしています。

シンプルなコード

<div ng-app="app" ng-controller="MainCtrl"> 
    <input name="widget.title" ng-model="widget.title"> 
    <input name="widget.content" ng-model="widget.content"> 
    <button ng-click="set('foo')">set to foo</button> 
</div> 

と

angular.module('app', []) 
    .controller('MainCtrl', function($scope) { 
     $scope.widget = {title: 'abc'}; 
     $scope.widget = {content: 'test'}; 
     $scope.set = function(new_title) { 
      this.widget.title = new_title; 
     } 
    }); 

のように見えるが、それは常に前を埋めるだけで、最後の入力欄

JSFiddle：http://jsfiddle.net/b40nLuf2/

Answer 1

、あなたは二($scope.widget = {content:'test'})との最初の$scope.widget ($scope.widget = {title:'abc'})を上書きします。

あなたはこのように、二つの属性、タイトルと内容を一つのオブジェクト$scope.widgetを定義する必要があります。

angular.module('app', []) 
    .controller('MainCtrl', function($scope) { 
     $scope.widget = { 
      title: 'abc', 
      content: 'test' 
     }; 
     $scope.set = function(new_title) { 
      this.widget.title = new_title; 
     } 
    }); 

Answer 2

あなたは、このコードスニペットを試すことができます

angular.module('app', []) 
    .controller('MainCtrl', function($scope) { 
     $scope.widget = {title: 'abc',content: 'test'}; 
     $scope.set = function(new_title) { 
      this.widget.title = new_title; 
     } 
    }); 

JSFIDDLE：あなたのケースではclick here to see

Answer 3

あなたはこの

$scope.widget = { 
     title: 'abc', 
      content: 'test' 
}; 

のようなあなたのオブジェクトを作成する必要があります