Question

我对angularjs代码有疑问。我有一个角色select复制在两个模态：创建用户和更改角色。这个选择以这种方式填充http调用：

<ui-select theme="bootstrap" style="width: 100%;"
    data-ng-model="newUser.role" required> 
    <ui-select-match placeholder="Select role">
       {{$select.selected.role}}
    </ui-select-match> 
    <ui-select-choices
       repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
       <span data-ng-bind="role.role"></span>
    </ui-select-choices>
</ui-select>

并且我有角度：

$http({
        method: 'GET',
        url: 'roles'
    }).then(function successCallback(response) {
        $scope.roles = response.data.result;
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

所以我将HTML代码放在表单中的两个模态中。在第一个，创建用户，所有工作正常，在第二个我不能使用不同的数据-ng模型，因为否则我收到未经分解的元素。例如，我有这个：

<form novalidate class="simple-form" name="newRoleForm">
    <!-- form start -->
    <div class="box-body">
        <div class="form-group">
            <label>New role</label>
            <!-- <ui-select theme="bootstrap" style="width: 100%;"
                data-ng-model="newRole.role" required> <ui-select-match
                placeholder="Select new role">
            {{$select.selected.role}}</ui-select-match> <ui-select-choices
                repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
            <span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select> -->
            <ui-select theme="bootstrap" style="width: 100%;"
                data-ng-model="newUser.role" required> <ui-select-match
                placeholder="Select role">
            {{$select.selected.role}}</ui-select-match> <ui-select-choices
                repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
            <span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select>
        </div>
    </div>
</form>

如果我使用注释代码，我在javascript中没有收到角色值，如果我使用未注释的代码，因为newUser用于另一个模态。我可以使用这个实际代码，但我想了解它为什么有效，另一个没有。此外，当我打开第二个模态时，我看到第一个模式中设置的值。你知道为什么吗？

Answer 1

获得完美概述有点棘手，但我想我会尽量回答你的一些问题：

newRole.role为什么newUser.role无效？

基本上你是我自己能够说出来的。在开始将属性绑定到范围之前，您需要在范围内的某个位置定义对象。即控制器中的简单$scope.newRole = {}可能会修复此错误。
第一个模态的值是在第二个模式中设置的吗？

我不确定这一点，因为我无法看到第二个模态（？）。但是，如果在同一范围内重用相同的代码，则会将数据绑定到同一个newUser对象。因此每次都获得相同的值。

我希望这在某种程度上有所帮助

Angularjs两个形式用于同一个控制器

1 个答案: