بنية بسيطة من index.html في Angular.js:
<! doctype html> <html ng-app> <head> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> اسمك: <إدخال نوع = "ng-model =" your your your your your your your your your your your your your your your your your your your your your your your your your your your your your your your your your your your. || 'عالم'}}! </body> </html>
خاصية NG-APP هي بيان علم Angular.js ، والذي يمثل نطاق Angular.js. يمكن إضافة NG-APP في العديد من الأماكن ، على النحو الوارد أعلاه ، إلى علامة HTML ، مما يشير إلى أن البرنامج النصي الزاوي يعمل للصفحة بأكملها. يمكنك أيضًا إضافة سمة NG-APP SCALICAL. على سبيل المثال ، إضافة NG-APP في DIV معين ، فهذا يعني أنه سيتم تحليل منطقة DIV بأكملها باستخدام البرامج النصية الزاوية ، في حين أن البرامج النصية الزاوية لن يتم تحليلها في أماكن أخرى.
NG-Model تعني إنشاء نموذج بيانات. هنا ، في مربع الإدخال لاسم الإدخال ، نحدد نموذج بيانات الخاص بك. بعد تحديد النموذج ، يمكننا إجراء مكالمات أدناه باستخدام {{}}. هذا يكمل ربط البيانات. عندما ندخل المحتوى في مربع الإدخال ، سيتم مزامنة مع كتلة عبارة Hello أدناه.
لا يمكن استخدام نموذج البيانات المحدد بواسطة NG-Model في السيناريوهات أعلاه ، ولكن يمكن استخدامه أيضًا على نطاق واسع في كثير من الحالات.
1. إعداد مرشح لتحقيق وظيفة البحث
في الكود التالي ، يمكننا إكمال وظيفة البحث في القائمة باستخدام تعريف نموذج بيانات بسيط + مرشح. (هذا هو رمز المثال على موقع الويب الصيني ، لذلك لا تحتاج إلى أن يكون غير واضح.)
<viv> <viv> <viv> Search: <input ng-model = "query"> </viv> <viv> <ul> <li ng-repeat = "phone in phone | filter: query"> {{phone.name}} <p>في الكود أعلاه ، يرتبط استعلام نموذج البيانات بعلامة إدخال مربع البحث. وبهذه الطريقة ، سيتم مزامنة المعلومات التي أدخلها المستخدم في نموذج بيانات الاستعلام. في LI التالي ، يمكن استخدام Filter: الاستعلام تطبيق وظيفة تصفية البيانات في القائمة والتصفية وفقًا لمعلومات إدخال المستخدم.
2. تعيين Orderby لتنفيذ وظيفة فرز القائمة
في الكود التالي ، مثل Filter ، استخدم OrderBy لإضافة وظيفة فرز إلى القائمة:
Search: <input ng-model = "query"> sort by: <select ng-model = "orderprop"> <option value = "name"> alphabetical </portive> <option value = "age"> <p> {{phone.snippet}} </p> </li> </ul>ما سبق يدور حول تقنيات استخدام NG-App و NG-Model. نراجع القديم ونتعلم الجديد. آمل أن يتمكن الجميع من الحصول على شيء منه.