Angular JS Does not Seem to work, новичок

-2

У меня есть одно примерное приложение из сети, которое я пытался реализовать, но он, похоже, не работает, ниже приведен код приложения, пожалуйста, помогите мне, исправив его и предложив мне как я могу сделать его лучше. Я новичок в Angular.Angular JS Does not Seem to work, новичок

Jsfiddle: http://jsfiddle.net/eGzZg/

<div id="main" ng-controller="contactDetails"> 
     <label>Name</label> 
     <input type="text" name="name" ng-model="newcontact.name"/> 
     <label>Email</label> 
     <input type="text" name="email" ng-model="newcontact.email"/> 
     <label>Phone No</label> 
     <input type="text" name="phno" ng-model="newcontact.phno"/> 
     <input type="hidden" ng-model="newcontact.id" /> 
     <input type="button" value="Save" ng-click="saveContact()" /> 
    <div id="table"> 
    <div id="thead"> 
     <span>Name</span> 
     <span>Email</span> 
     <span>Phone No</span> 
     <span>Action</span> 
    </div> 
    <div id="tbody" ng-repeat="contact in contacts"> 
     <span> {{contact.name}} </span> 
     <span> {{contact.email}} </span> 
     <span> {{contact.phno}} </span> 
     <span> <a href='#' ng-click="edit(contact.id)">Edit</a></span> 
     <span> <a href='#' ng-click="delete(contact.id)">Delete</a></span> 
    </div> 
    </div> 
</div> 


<script> 
var uid = 0; 
function contactDetails($scope) { 
    //$scope.contacts = [{ id : null, 'name':null, 'phno':null }]; 
    $scope.contacts = [ 
     { id:0, 'name': 'Viral', 
      'email':'[email protected]', 
      'phno': '123-2343-44' 
     } 
    ]; 
    $scope.saveContact = function(){ 
    alert('sd'); 
    for(i in $scope.contacts){ 
     if($scope.contacts[i].id == $scope.newcontact.id || ($scope.contacts[i].name == $scope.newcontact.name && $scope.contacts[i].phno == $scope.newcontact.phno)){ 
     $scope.contacts[i] = $scope.newcontact; 
     }else{ 
     $scope.contacts.id = ++uid; 
     $scope.contacts.push($scope.newcontact); 
     } 
     $scope.newcontact = {}; 
    } 
    } 
} 
</script>

источник

2014-02-13 SJ-B

Как вы ожидаете, что это сработает? Угловой даже не загружен. Используйте плункер, у которого есть угловой шаблон, чтобы играть с ним. –

не забудьте фактически включать угловые, а также вы забыли нг-приложение

<body ng-app>

here ya go

источник

2014-02-13 12:50:31 xyclos

Спасибо, Бадди! У меня есть одна проблема здесь, проверьте код в jsfiddle, изначально проблема заключается в том, что объекты контактов являются нулевыми, из-за чего дополнительные правки и удаления тегов вы видите всегда в начале, как избавиться от него? http://jsfiddle.net/eGzZg/4/ –

Я не очень понимаю ваш вопрос. Я настоятельно рекомендую вам сначала ознакомиться с учебником AngularJS: http://docs.angularjs.org/tutorial (если вы еще этого не сделали). Затем пройдите через все 25 дней из этого: http://www.ng-newsletter.com/advent2013/#!/ Я обещаю, что после прохождения обоих вы станете угловым экспертом в кратчайшие сроки. – xyclos

Просто измените $scope.contacts = [{ id : null, 'name':null, 'phno':null }];

в $scope.contacts = [];

Даже если вы установили свойства контактных элементов равными нулю, у него все еще есть один элемент, поэтому текст отсутствует, но кнопки появляются при загрузке страницы.

источник

2014-02-13 14:52:57 akjha627

Angular JS Does not Seem to work, новичок

ответ

Смежные вопросы