在渲染页面时,如何从手柄获取角度数据

时间:2016-08-03 03:57:08

标签: javascript angularjs node.js handlebars.js angularjs-ng-model

我使用数据渲染车把模板。

 var express = require('express'),
    app = express();
var handlebars = require('express3-handlebars')
    .create({
        defaultLayout:'main',
        helpers: {
            section: function (name, options) {
                if(!this._sections) this._sections = {};
                this._sections[name] = options.fn(this);
                return null;
            }
        }
    });



// setup hbs
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');


app.use(express.static(__dirname + '/public'));
app.use(function (req,res,next) {

    next();
});

// serving homepage
app.get('/', function (req, res) {
    res.render('home');
});
app.get('/about', function(req, res){
    res.render('about', {
        lucky: "you are lucky."
    });
});
// 404
app.use(function(req, res, next){
    res.status(404);
    res.render('404');
});
// 500 
app.use(function(err, req, res, next){
    console.error(err.stack);
    res.status(500);
    res.render('500');
});
// startup
app.listen(3000, function() {
    console.log('Express started on http://localhost:' +
        app.get('port') + '; press Ctrl-C to terminate.');
});

在客户端,我使用anuglarjs。我怎么能在页面上打开“幸运”数据并切换到角色?

    <div class="container" ng-app="myApp" ng-controller="myCtrl">   
        <div class="row">
            <div class="col-lg-12">
                <form class="form-horizontal" role="form" ng-submit="update()">
                    <div class="form-group">
                        <label class="col-md-2 control-label">Luck</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="Lucky"
                                   ng-model="Lucky" value='{{lucky}}'/>
                        </div>
                    </div>
                    <div class="form-group">
                       <div style="padding-left:300px">
                           <input type="submit" value="Submit" class="btn btn-primary"/>
                       </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

在角度应用程序中,我想处理数据以处理某些事情。

var myApp = angular.module('myApp', []);
myApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
});
myApp.controller('myCtrl', function ($scope) {

    $scope.update= function () {
        $scope.lucky = 'hello world, lucky guy!';
    };


});

该值设置为“你很幸运。”但它没有显示出来。我搜索了一些类似的问题。他们说它与数据绑定有关。 如何解决?

1 个答案:

答案 0 :(得分:1)

首先,您不需要设置value属性,但是如果您真的需要使用它,则应该只是value="{{lucky}}"(不带单引号)。

主要问题是ngModel Lucky只有lucky时才会code

根据您的(function() { 'use strict'; angular .module('myApp', []) .controller('myCtrl', myCtrl); myCtrl.$inject = ['$scope']; function myCtrl($scope) { $scope.lucky = 'initial value'; $scope.update = function() { $scope.lucky = 'hello world, lucky guy!'; }; } })();

演示

&#13;
&#13;
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
  <div class="container" ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
      <div class="col-lg-12">
        <form class="form-horizontal" role="form" ng-submit="update()">
          <div class="form-group">
            <label class="col-md-2 control-label">Luck</label>
            <div class="col-md-4">
              <input type="text" class="form-control" name="Lucky" ng-model="lucky">
            </div>
          </div>
          <div class="form-group">
            <div style="padding-left:300px">
              <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>

</html>
&#13;
public class SimpleAdapter extends ArrayAdapter<String> {
    public SimpleAdapter(Context context, int resource, String[] objects) {
        super(context, resource, objects);
    }

    public SimpleAdapter(Context context, int resource, List<String> objects) {
        super(context, resource, objects);
    }

    public SimpleAdapter(Context context, int resource, int textViewResourceId, String[] objects) {
        super(context, resource, textViewResourceId, objects);
    }

    public SimpleAdapter(Context context, int resource, int textViewResourceId, List<String> objects) {
        super(context, resource, textViewResourceId, objects);
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        return super.getDropDownView(position, convertView, parent);
    }
}
&#13;
&#13;
&#13;