角度範囲で表示する新しい名前を取得

私は新しい名前を掲示し、ページに名前を表示する簡単な角度コントローラを持っています。角度範囲で表示する新しい名前を取得

問題が

任意のアイデアどのようにこの問題を解決するために、なぜ働いていないその....私は名前とスコープに表示する内容の残りの部分を参照してくださいカントのですか？

HTML

<!DOCTYPE html> 
<html lang="en" ng-app='myApp'> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Base64 Upload Demo</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="style.css"> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script> 
    <script type="text/javascript" src="app.js"></script> 

</head> 
<body> 

<div ng-controller="UpLoadImage"> 

    <div ng-repeat="step in stepsModel"> 
     <img class="thumb" ng-src="{{step}}"/> 
    </div> 

    <label for="file">Select File</label> 
    <input type='file' name='file' base-sixty-four-input required onload='onLoad' maxsize='600' 
      accept='image/*' ng-model-instant onchange='angular.element(this).scope().imageUpload(this)'/> 
</div> 

<div ng-controller="PostData"> 
    {{items.c_name}} 

    <form ng-submit="sendPost()"> 
     <input ng-model="newName"/> 
     <button type="submit">Send Data</button> 
    </form> 
</div> 

</body> 
</html>

App.js

angular.module('myApp', ['naif.base64']) 
.controller('UpLoadImage', function ($scope, $http, $window, $rootScope) { 

    $scope.imageUpload = function (element) { 
     var reader = new FileReader(); 
     reader.onload = $scope.imageIsLoaded; 
     reader.readAsDataURL(element.files[0]); 
    }; 

    $scope.imageIsLoaded = function (e) { 
     $scope.$apply(function() { 
      $scope.stepsModel.push(e.target.result); 
     }); 

     $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) { 
      alert('image uploaded'); 
     }; 
    }; 

    $scope.stepsModel = []; 
}) 

.controller('PostData', function ($scope, $http) { 
    $scope.items = { 
     c_name: "Campaign name here", 
     max_slots: 5, 
     slots: [ 
      { 
       slot_id: 1, 
       base_image: "base 64 image" 
      } 
     ] 
    }; 

    $scope.newName = "Enter name"; 
    $scope.sendPost = function() { 
     var data = $.param({ 
      json: JSON.stringify({ 
       c_name: $scope.newName 
      }) 
     }); 
     $http.post("/echo/json/", data).success(function(data, status) { 
      $scope.items = data; 
     }) 
    } 
});

出典

2017-09-21 Beep

あなたがベース-60-四にNG-モデルプロパティを逃しました入力ディレクティブ入力：

angular.module('myApp', ['naif.base64']) 
 
.controller('UpLoadImage', function ($scope, $http, $window, $rootScope) { 
 

 
    $scope.imageUpload = function (element) { 
 
     var reader = new FileReader(); 
 
     reader.onload = $scope.imageIsLoaded; 
 
     reader.readAsDataURL(element.files[0]); 
 
    }; 
 

 
    $scope.imageIsLoaded = function (e) { 
 
     $scope.$apply(function() { 
 
      $scope.stepsModel.push(e.target.result); 
 
     }); 
 

 
     $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) { 
 
      alert('image uploaded'); 
 
     }; 
 
    }; 
 

 
    $scope.stepsModel = []; 
 
}) 
 

 
.controller('PostData', function ($scope, $http) { 
 
    $scope.items = { 
 
     c_name: "Campaign name here", 
 
     max_slots: 5, 
 
     slots: [ 
 
      { 
 
       slot_id: 1, 
 
       base_image: "base 64 image" 
 
      } 
 
     ] 
 
    }; 
 

 
    $scope.newName = "Enter name"; 
 
    $scope.sendPost = function() { 
 
     var data = $.param({ 
 
      json: JSON.stringify({ 
 
       c_name: $scope.newName 
 
      }) 
 
     }); 
 
     $http.post("/echo/json/", data).success(function(data, status) { 
 
      $scope.items = data; 
 
     }) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en" ng-app='myApp'> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Angular Base64 Upload Demo</title> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 
 
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script> 
 
    <script type="text/javascript" src="app.js"></script> 
 

 
</head> 
 
<body> 
 

 
<div ng-controller="UpLoadImage"> 
 

 
    <div ng-repeat="step in stepsModel"> 
 
     <img class="thumb" ng-src="{{step}}"/> 
 
    </div> 
 

 
    <label for="file">Select File</label> 
 
    <input ng-model="file" type='file' name='file' base-sixty-four-input required onload='onLoad' maxsize='600' 
 
      accept='image/*' ng-model-instant onchange='angular.element(this).scope().imageUpload(this)'/> 
 
</div> 
 

 
<div ng-controller="PostData"> 
 
    {{items.c_name}} 
 

 
    <form ng-submit="sendPost()"> 
 
     <input ng-model="newName"/> 
 
     <button type="submit">Send Data</button> 
 
    </form> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-09-21 12:39:42

あなたの男、ありがとう – Beep

、プロパティc_nameが$ http.postによって返されたデータに存在していますか？。あなたが実際に得たものを印刷するコンソールログを追加してください。また、エラーコールバックを設定することによってエラーがないことを確認する必要があります。私はまた、（例えば代わりにデータの解像度）結果のためにデータ以外の名前を与えることをお勧め：

var data = {}; // There is already a variable named data here 
    $http.post("/echo/json/", data).success(function(res, status) { 
     $scope.items = res; 
     console.log("$scope.items: ", $scope.items); 
    }, function() { console.log("There is an error"); })

出典

2017-09-21 12:37:25 Faly

これもお役に立ちました、ありがとうございました。 +1 – Beep

-1

base-sixty-four-input指令を使用した入力にng-modalを入力します。
jqueryのcdnパスを追加します。

出典

2017-09-21 13:02:03 Prasad

角度範囲で表示する新しい名前を取得

答えて

関連する問題