Javascript 获取要在角度范围中显示的新名称_Javascript_Angularjs_Json

Javascript 获取要在角度范围中显示的新名称

javascript angularjs json

Javascript 获取要在角度范围中显示的新名称,javascript,angularjs,json,Javascript,Angularjs,Json,我有一个简单的角度控制器来发布一个新名称并在页面上显示该名称问题是我看不到名称和范围中显示的其他详细信息你知道如何解决这个问题，为什么它不起作用吗 HTML <!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>Angular Base64 Upload Demo</title>

我有一个简单的角度控制器来发布一个新名称并在页面上显示该名称

问题是我看不到名称和范围中显示的其他详细信息

你知道如何解决这个问题，为什么它不起作用吗

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>

您确定$http.post返回的数据上存在属性c_name吗。添加控制台日志以打印您真正得到的内容。您还必须通过设置错误回调来确保没有错误。我还建议为结果提供数据以外的名称（例如，res而不是data）：

您在Base64输入指令输入中缺少了ng model属性：

angular.module（'myApp'，['naif.base64']））
.controller（'UpLoadImage'，函数（$scope、$http、$window、$rootScope）{
$scope.imageUpload=函数（元素）{
var reader=new FileReader（）；
reader.onload=$scope.imageisload；
reader.readAsDataURL（element.files[0]）；
};
$scope.imageIsLoaded=函数（e）{
$scope.$apply（函数（）{
$scope.stepsModel.push（e.target.result）；
});
$scope.onLoad=函数（e、读卡器、文件、文件列表、文件对象、文件对象）{
警报（“上传图像”）；
};
};
$scope.stepsModel=[]；
})
.controller（'PostData'，函数（$scope，$http）{
$scope.items={
c_name:“此处为活动名称”，
最多插槽：5个，
插槽：[
{
插槽id:1，
基本图像：“基本64图像”
}
]
};
$scope.newName=“输入名称”；
$scope.sendPost=函数（）{
变量数据=$.param({
json:json.stringify({
c_名称：$scope.newName
})
});
$http.post（“/echo/json/”，data）.success（函数（数据，状态）{
$scope.items=数据；
})
}
});

AngularBase64上传演示
选择文件
{{items.c_name}
发送数据

将ng模式添加到使用base 64 input指令的输入中
添加jquery的cdn路径

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;
        })
    }
});

    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"); })