AngularJS推送不更新一个div中的值,而在其他div中更新

时间:2014-11-23 08:37:54

标签: javascript jquery html css angularjs

如果我要添加新联系人,则会在ul - li中添加,但不会在select - 选项中添加。

这是我的计划。

<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World, AngularJS - ViralPatel.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<script>
    function ContactController($scope) 
    {
        $scope.contacts = ["hi@email.com", "hello@email.com"];

        $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
        }
    }
</script>

</head>
<body>
<div ng-controller="ContactController">
    <select ID="select-add-new-product-brand-name">
        <option  ng-model="selectedItem" ng-repeat="contact in contacts" value={{contact}}>{{ contact|uppercase }}</option>
    </select>
</div>

<div ng-controller="ContactController">
     Email:<input type="text" ng-model="newcontact"/>
    <button ng-click="add()">Add</button>

     <ul>
        <li ng-repeat="contact in contacts"> {{ contact }} </li>
    </ul>

</div>

</body>
</html>

这里有什么问题?

1 个答案:

答案 0 :(得分:1)

你是两个控制

plunker

只使用一个控制器

<div ng-controller="ContactController">
    <select ID="select-add-new-product-brand-name">
        <option  ng-model="selectedItem" ng-repeat="contact in contacts" value={{contact}}>{{ contact|uppercase }}</option>
    </select>
     Email:<input type="text" ng-model="newcontact"/>
    <button ng-click="add()">Add</button>