0
私はAngularJSを使い始めています。私は非常に簡単なプログラムを作成しようとしています。ここであなたが好きなフルーツを選んで結果を表示します。AngularJSの2つの異なるコントローラの結果を出力する
この選択は、3つのクイックボタンまたはテキスト入力に名前を入力するなど、2通りの方法で実行できます。これらの2つのモードは、コントローラが異なります。
私はボタンを使用していますが、テキストエディタではうまく動作しません。
コントローラ1のテキストエントリに書き込まれた名前を転送し、その結果を印刷します。
私のコードは次のとおりです。
<html ng-app="myApp">
<head>
<title>Fruits</title>
<script src="https://code.angularjs.org/1.2.19/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.service('simpleService', function() {
var _fruit = 'None :(';
var addFruit = function(newObj) {
console.log(newObj);
_fruit = newObj;
}
var getFruit = function(){
return _fruit;
}
return {
addFruit: addFruit,
getFruit: getFruit
};
})
app.controller('controller1',function($scope, simpleService){
$scope.fruit = simpleService.getFruit();
$scope.fruitApple = function(){
$scope.fruit ='Apple';
}
$scope.fruitPear = function(){
$scope.fruit ='Pear';
}
$scope.fruitBanana = function(){
$scope.fruit ='Banana';
}
})
app.controller('controller2', function($scope, simpleService){
$scope.fruit2 = 'Other?';
$scope.fruitEditor = function(f){
if(angular.isString(f)){
$scope.fruit2 = f;
simpleService.addFruit(f);
}
}
});
</script>
</head>
<body>
<div ng-controller="controller1">
<button ng-click="fruitPear()">Pear</button>
<button ng-click="fruitApple()">Apple</button>
<button ng-click="fruitBanana()">Banana</button>
<br/>
<br/>
<div ng-controller="controller2">
Edit:
<input type="text" ng-change="fruitEditor(fruit2)" ng-model="fruit2">
</div>
<h5>Favorite fruit: {{fruit}}</h5>
</div>
</body>
</html>
よろしく。