0
$scopeという名前のvarにデータをバインドする際に問題があります。私はmysqlデータベースを呼び出すと、高速でデータを送信します。
app.get('/options', function(req, res)
{
var arr = [];
var query = "SELECT * FROM memberships";
con.query(query, function(err, result)
{
if (err)
{
console.log("error retriving memberships from the db " + err);
throw err;
}
res.send(result);
});
/* server side of things */
今や角度のある側面に行く。私はそれがデータベースから正しい情報を引き出すことがわかりますJSON.stringify($scope.things)への私の最初の呼び出しで
app.controller('MainController', ['$http', '$scope', '$log',
'getmemOptions', function($http, $log, $scope, getmemOptions)
{
var gymmem = this;
gymmem.onSubmit = onSubmit;
gymmem.options;
$scope.things;
var promise = $http.get('/options');
promise.then(function(payload)
{
$scope.things = angular.copy(payload.data);
alert(JSON.stringify($scope.things)); // 1st call view $scope.things
});
alert(JSON.stringify($scope.things)); // 2nd call view $scope.things
。ただし、2番目の呼び出しは定義されていません。私は、$http呼び出しが約束を返す方法のjavascriptの非同期性を認識しています。私は約束の権利を処理していると信じていますが、もし私がいなければ、私が物事をどのように変えることができるか教えてください。前もって感謝します！！ここで
EDIT
は角-formlyテンプレートです。
gymmem.model =
{
first_n: '',
last_n: '',
email: '',
age: '',
memberships: '',
};
gymmem.fields = [
{
key: 'first_n',
type: 'input',
model: gymmem.model.f_name,
templateOptions:
{
type: 'text',
label: 'First Name',
placeholder: 'Enter your first name',
required: true
}
},
{
key: 'last_n',
type: 'input',
// model: gymmem.model.l_name,
templateOptions:
{
type: 'text',
label: 'Last Name',
placeholder: 'Enter your last name',
required: true
}
},
{
key: 'email',
type: 'input',
//model: gymmem.model.email,
templateOptions:
{
type: 'text',
label: 'Email Address',
placeholder: 'Enter your email address',
required: true
},
hideExpression: '!model.first_n || !model.last_n'
},
{
key: 'age',
type: 'input',
//model: gymmem.model.age,
templateOptions:
{
type: 'number',
label: 'Age (must be 16+)',
placeholder: 'Enter your age',
required: true
},
//check if customer is 16+
validators:
{
ofAge: function($viewValue, $modelValue, scope)
{
var age = $viewValue || $modelValue;
if (age >= 16)
return true;
return false;
}
}
},
{
key: 'memberships',
type: 'select',
model: gymmem.model.membership,
templateOptions:
{
label: 'Membership Types',
required: true,
placeholder: "Select Membership",
options: $scope.things//[{"name":"Martial Arts Membership","value":45},{"name":"Regular Gym Membership","value":30},{"name":"Cardio Classes Membership","value":35}]
}
},
];
function onSubmit()
{
//alert(JSON.stringify(gymmem.model), null, 2);
$http.post('/', gymmem.model).success(function(req)
{
gymmem.model = {};
console.log("Front end data " +req);
}).error(function(err)
{
console.log(err);
});
};
}
]);
ここはちょうどhtmlです。
<body ng-app="GymApp" ng-controller="MainController as gymmem">
<div class="container col-md-4 col-md-offset-4">
<form ng-submit="gymmem.onSubmit()" novalidate>
<h1> Buy Gym Membership(s) </h1>
<formly-form model="gymmem.model" fields="gymmem.fields">
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</formly-form>
</form>
</div>
</body>
[{ "名前"： "格闘技会員"、 "値"：45}、{ "名前"： "正規ジム会員"、 "値"：30}、{ "名前"：」 Cardio Classes Membership "、" value "：35}]は$ scope.thingsに必要なデータです。ここのデータは$ http.get（）呼び出しによって処理されています。
フォーマットに関する問題は残念です。急いで、stackoverflowの投稿に新しいといくつか。
私は依存関係の順序を変更し、しかしそれは問題ではなかった。以前は "var options"という変数にバインドされていましたが、それが何か変わるかどうかを調べるために$ scopeに追加しました。私はangularjsに新しいので、単純なものがあれば教えてください。また、なぜdownvote？ –
@SimronPatel、optionsという変数へのバインディングは、あなたが 'gymmem'を使ってやろうと思っているControllerAs構文を使用している場合にのみ機能します。データを取得している場合は、テンプレートに適切にバインドしていません。テンプレートコードも提供できますか？下降は私ではありませんでした。私はあなたをバックアップするでしょう、これは間違いなく有効な質問です。 –
確かに、私に瞬間を与えてください。バンプをありがとう。 –